Mixing 100% Width with 80% Width

Hi,

I am building a homepage which has 100% width for one part and then 80% with 10% border down the left and right.

One example would be http://www.kickstarter.com/

Can anyone advise the best way to this design. Would you keep the two seperate?

As long as you watch the borders and other pieces of the box models, you should be fine. You’ll want to keep them separate, but really you only need to place the width/margins on the 80% portion.

Thanks, I have 2 DIVs. Left, Centre and Right. However the left and right DIVS only keep their width if I have something in it.

Is their a way to keep with width even though it is empty?

Is it okay to use   ?

As long as the divs have a width set, they will stay at that width, empty or not.

[ot]

Hmm … as they say, there are three kinds of people—those who can count, and those who can’t. :shifty: [/ot]

Thanks, it works fine in IE but in Firefox is collapses.

Do you have an example you can post?—either a link, or the HTML/CSS you are working with.

Hi, this my CSS. Ive tried different things like changing the height. It works fine in IE but the div collapses in Firefox.

#headerleft {
float:left;
width:15%;
height: 100%;
}

#headerright {
float:right;
width:15%;
}

#header {
float:left;
width:70%;
}

Because I am confused as to what you are trying to say, i will just note that teh BORDER property does NOT take % .
Also CHECK your DOCTYPE!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If that doesn’t do it ( or if it also breaks IE) you may have added padding, margin or border to any of those elements and you need to take that into account whenever you declare a width . Example : {width:15%; border:5px solid pink; padding 25px; margin:0 5%;} actually computes to:

15% + (5% +5%)from Margin + (25px +25px)from Padding + (5px +5px)from Border=25%+60px. So if you were expecting the width to be 15% or even 25% you’d be off and your element will “drop”

This is a completely different scenario than you posted earlier - you asked about one container at 80%, now you’ve got three containers which you want to place side by side. Assuming that you don’t have any child content that is larger than your anticipated widths, you should be OK (don’t forget to clear your floats though).

If however, headerleft and headerright are there simply to force the margins, that’s not the approach to take.


:
<style>
     #header { width: 70%; margin: 0 auto; }
</style>
:
<div id="header">CONTENT GOES HERE</div>

:
<style>
     #header { width: 70%; margin: 0 auto; }
</style>
:
<div id="header">CONTENT GOES HERE</div>

Hi, I tried this, it pushes it to the left and makes the div 70% wide. I am looking to centre the 70% DIV.

What you have there is fine, so something else on the page is messing it up.