beginner, having trouble with site layout (fluid design)

My business is trying to create a fluid site by using min and greatest extent width and was running into 2 problems:
A SINGLE. ) My tips were falling below themselves as opposed to going to a horizontal scroll… I tweaked the css somewhat and now the moment the max thickness is exceeded the columns remain place (to the left) as you move header centers itself considering the window.
3. ) My Finally column (" sidebar2" ) is having trouble considering the text placed in it. The text is down end of it at the column but will not appear with the top like I would prefer it to.

My apologies if the solutions are obvious

Upload the page so we could see it. Likely, the content within your columns is wider versus the max widths (or widths) designated to them.

Looking at that code for the page now, I would state you’ve got very much problems. I see closed tags who were never opened, opened tags who were never closed, CSS which you apparently took from another person’s site (I’m speculating a pro-Firefox designer wannabe based on the comments).

The great thing you can do is to take that internet page and duplicate them from scratch. Beging with the three columns. Get those working with just text. Something similar to this:

< div id=" left-sidebar" >
Quit sidebar content will go here.
< /div>
< div id=" content" >
Written content goes here.
< /div>
< div id=" right-sidebar" >
Appropriate sidebar content will go here.
< /div>

Don’t put your own actual content in until you get the three articles lined up with generic content (lorem ipsum may suffice here with the short run. )

Once you’ve got that done, drop your content in a single column at any given time, make sure every column works, then move about the next one.

When you’ve got that, put your menu for the top in much the same fashion.

As a result, you’ll see exactly which elements of the code are usually busting up your layout and be able to deal with all of them better. There are only too many to help guess at, and it’ll end up being quicker to recode the entire page than it will eventually to spend all day long or longer trying to puzzle out which parts are generally messed up.

Gives thanks! Being a newb I thought I really could make the page correctly and then edit out/delete out the entire useless stuff… but I guess it is just too much of a mess: /

I realize TheGame – you’d probably be better off originating in scratch.

Put everything (possibly eliminating the header and footer – that relies on some other things) suitable main container, and give your min and potential widths. Inside this, use percentages to keep the layout water, and position everything in your CSS.

There’s a great explanation of the way to go about this at this connection – it should assist you.

Ok, I still need a bit more help lol

My business is at work thus I can’t get a hold of the file for the example you sent to compare sooo,

charset " utf-8";
/* CSS Insurance coverage */

background-color: #CCC;
min-width: 288px;
max-width: 384px;
quit: 2%;
bigger: 30%;
position: absolute;

background-color: #CCC;
min-width: 192px;
max-width: 252px;
quit: 80%;
bigger: 20%;
position: absolute;

background-color: #666;
min-width: 480px;
max-width: 640px;
quit: 25%;
bigger: 50%;
position: absolute;

is my with the new site… what part ‘m I not getting hired is fluid in addition to min/max width…. but not working correctly for the page

I also additional a container around them considering the min/max width of what I need the 3 columns for being altogether

OKAY – don’t mix min and utmost width and percentages. When you have a container for your thing, set your minutes and max wider on that after which in the copy, use percentages. As well, your left sidebar overall width in percent is required to equal the left distance for the center content (blue highlighted).

test that out in addition to see how that works…

the container minutes and max may not be working it seems-it keeps going as opposed to becoming a scroll tavern

You won’t get a scroll bar just by setting a minimum and maximum thickness. If you really want a scrollbar, established overflow: auto;.

Head you, that’s you wish a scrollbar, and users normally won’t accept anything rather than the vertical scrollbar for the right side of the browser.

hence, minus the scroll club, is there an answer for making the particular max and min width in the container I ask bc I need to embed movies

Make sure the width within your container is as a minimum the width in the largest video you would like to embed + concerning 200 pixels for text and things. Since you’re water, I’d suggest your min and max widths can be in the area of 1000 – 1400 pixels (I’ve commonly found min plus max work greater as fixed volumes than percentages).

Yeah – you will need to set the bottle min and potential in pixels — I guess I didn’t state that will clearly, I thought it would clear from the actual code I exhibited.

I did have it in pixels… I’d to set the position of the container to relative to receive it to stop at min/max though, otherwise it might keep shrinking or expanding.

Hereeee’s a different question (hope people guys don’t mind! )

My header can be a set amount connected with pixels wide. Is there a better way I can ensure it is centered with my containers regardless of what width they are

My business is also having any trip up considering the header not beginning in the very top of the page- I tried playing with the padding, but nothing appeared to fix it. Suggestions

Gives thanks AGAIN! lol

For you to center the header, in your CSS give it

It may be the browser dictating the distance from the top in the page (each browser features a built-in set associated with CSS rules plus they are not all the same). To eliminate this you are able to put a reset in the very beginning within your CSS file (a CSS reset was designed to set a number of element styles to a specific baseline of which creates consistency all around various browsers. ) I usually make use of a quite thorough totally reset, but many will not. A very simple you are –

The asterisk is essential – don’t give it out!
If you would like read more with regards to CSS reset, the good news is good article from this link.


Thanks sooo significantly! You both get saved my $$!

This entry was posted in Web Design and tagged , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *