Fluid layout with margins 1

TobyA · Mar 5, 2007

Hi,

I am trying to create a simple, single-column site with a fluid layout and margins around the outside of the page.

Using a DIV with 100% width plus margins, FF interprets the page as larger than the window and hence displays horizontal scroll bars.

Instead, I thought, why not try using 90% width and 5% margins on either side:-

div.fluid {
float: left;
border: 1px solid grey;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 10px;
}

I check FF - Hoorah! Success!

Next I check IE6.... Boo! There is a horizontal scrollbar, and for some reason the border isn't displayed.

I need to set the padding and margin of the body to 0, so I have to create this spacing using the DIV.

I have read through lots of websites regarding "fluid layouts" but none of them seem to incorporate margins around the outside of the page.

I hope this makes sense. Any help you can give me would be greatly appreciated.

Thanks,
Toby

caffrinho · Mar 5, 2007

try setting the width back to 100% for IE only

Code:

<!--[if IE]>
<div style="width:100%;">

<![endif]-->

caffrinho · Mar 5, 2007

of course, that should be

Code:

<!--[if IE]>
<style>
div.fluid{
   width:100%;
}
</style>

<![endif]-->

and it'll need to go after your link to the original css

HTH

TobyA · Mar 5, 2007

Thanks for your posts Caffrinho. Haven't had time to try that yet, but I will give it a go tomorrow and let you know if it works.

Cheers,
Toby

ChrisHunt · Mar 5, 2007

Miss out the [tt]width[/tt] altogether. If you don't specify a width, the <div> will just take up whatever's left. So you can do it like this:

Code:

div.fluid {
    border: 1px solid grey;
    margin: 10px 5% 0;
}

In fact, there's really no need for the <div> - you could just apply those styles to the <body>.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Vragabond · Mar 5, 2007

Unless of course your div needs to be floated, as your example states. Then having no width will result in the width equalling to auto, or just enough to fill the content. In that case you can solve your issue with margins set to auto rather than a fixed size (because 1px border on each side + 90% + 2x5% is more than 100%).

Code:

div.fluid {
    float: left;
    border: 1px solid grey;
    width: 90%;
    margin: 10px 5% 0;
}

TobyA · Mar 7, 2007

Thanks all.

Vragabond I tried this approach but IE6 still shows me a horizontal scrollbar...

I'm tempted to ditch this approach and try max/min width. Or failing that just stick to a fixed width layout!

ChrisHunt · Mar 7, 2007

I don't see why you'd need the [tt]float:left[/tt]. If it's to contain floated elements, you should be able to get the same effect with [tt]overflow:auto[/tt]. Without a float, you won't have to specify a width, which means you can go with my previously suggested solution.

If you're stuck with floating div.fluid the problem you'll have is that you're specifying a width of 90%, but using a width of 90% + 2px for the border. That's why you get the scroll bar. The answer is to nest a second div inside div.fluid. This works on FF & IE, without any scroll bar:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
    <title>Some title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
<style type="text/css">
body {
   margin: 0;
   padding: 10px 5% 0
}

div.fluid {
    float: left;
    width: 100%;
}

   div.inner {
     border: 1px solid gray;
   }
</style>
</head>
<body>
<div class="fluid">
<div class="inner">
Type some text in here...
</div>
</div>
</body>
</html>

If you look carefully, you may also see why your border wasn't showing on IE. IE only speaks American, so you have to specify "gray" as the colour, instead of "grey". Frankly, I recommend you get into the habit of always using hex RGB values to specify colours - to be sure that all possible browsers understand what you want.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

TobyA · Mar 7, 2007

Chris,

That works for me. However, I don't want to use padding on the body because it won't work with my design:-

http://www.ubsigroup.com/dev/

Using your method, the red bar at the top of the browser won't stretch out to the edge of the browser window.

I did make a fixed layout of this page and I thought it looked great, but my boss decided he wanted a fluid layout....

Thanks again,
Toby

Vragabond · Mar 7, 2007

Sorry, didn't really change anything on your code, did I? The correct code should read:

Code:

div.fluid {
    float: left;
    border: 1px solid grey;
    width: 90%;
    margin: 10px auto 0;
}

TobyA · Mar 7, 2007

Thanks Vragabond...

That code doesn't give me a margin on the left hand side though :-(

ChrisHunt · Mar 7, 2007

This is the third time I'm going to say this, then I'm going to stop wasting my time and give up on this thread.

Take out the floats and the widths and it will work

It's also helpful, when you have another constraint such as coloured bars that have to stretch the full width of the screen, to mention them - rather than expecting any answer offered to know about them through telepathy.

The following tweaks to liquid.css seem to do what you want, assuming that you still want a 5% margin down both sides:

Code:

#header {
		margin: 25px 5% 25px;
		text-align: left;
}

#navcontainer {
		background: #CC0000;
		height: 18px;
		text-align: left;
}

#navigation {
		margin: 1px 5% 0;
}

#content {
		clear: both;
		text-align: left;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		padding: 20px 5%;
}

.centerdiv{ /*IE method of centering a relative div*/
		margin-top: 10px;
		margin-bottom: 0px;
		text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
		margin-top: 10px;
		margin: 0 auto;
}

#footercontainer {
		clear: both;
		background: #CC0000;
		height: 18px;
		text-align: left;
		font-family: Tahoma;
		font-weight: normal;
		color: #FFFFFF;
}

#footerdiv {
		margin: 1px 5% 0;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

TobyA · Mar 7, 2007

Chris,

Thanks a lot for your patience and thank you for posting again.

I haven't tried your latest suggestion yet, but I will do this afternoon.

FYI - If you look at my original post, I wrote:-

"I need to set the padding and margin of the body to 0, so I have to create this spacing using the DIV."

Thought that explained the situation. Sorry for any confusion.

TobyA · Mar 7, 2007

Chris,

Thanks again for your help. I've uploaded your changes now but I still haven't quite got what I'm after....

http://www.ubsigroup.com/dev/

See there's a link to view the site in liquid or fixed layout? In the liquid layout I want a margin around the header, content and footer (similar to the fixed layout, only obviously I want the whole lot to expand when the browser window is resized).

I hope this makes sense.

Thx again to all posters so far...

Tarwn · Mar 8, 2007

As several people have mentioned, there are several ways to achieve this. The simplest method would be to add a margin to the body element or to add a margin to the sitewrapper element without specifying a width (or specifying width: auto).

ChrisHunt · Mar 8, 2007

Oh, right, so the red line at the top of the screen extends the full width of the screen, but everything else has the 5% gaps down the side?

I suggest you give the <body> [tt]padding: 0 5%;[/tt], then remove (or adjust) the horizontal margins/padding I suggested in my previous post.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

TobyA · Mar 8, 2007

Yep, that's correct. The red bar at the top wants to stretch to the full width of the window. Everything else wants to have padding around it.

If I use padding on the <body> how do I make the red bar stretch to the edge of the window?

Sorry if I'm being really dim!!

ChrisHunt · Mar 9, 2007

If I use padding on the <body> how do I make the red bar stretch to the edge of the window?

Exactly how you're doing it now. The red bar is a border along the top of the <body>. Padding goes inside borders. You may think that qualifies as "being really dim", I couldn't possibly comment.

Actually, looking at it (yet) again, you should be able to do the whole thing by changing the rules for div#sitewrapper and nothing else:

Code:

/* Fixed version */
#sitewrapper {
   width: 770px;
   margin-left:auto;
   margin-right:auto;		
}

/* Fluid version */
#sitewrapper {
   margin-left:5%;
   margin-right:5%;
}

Obviously you'll put them in separate stylesheets, but it should make it easier to maintain your site in the future.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

TobyA · Mar 9, 2007

That's it! That's exactly what I wanted.

Great - Thanks for your perseverance.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Fluid layout with margins 1

MIS

MIS

MIS

MIS

Programmer

Programmer

MIS

Programmer

MIS

Programmer

MIS

Programmer

MIS

MIS

Programmer

Programmer

MIS

Programmer

MIS

Similar threads

Log in

Part and Inventory Search

Sponsor