CSS Forum

**MattCoops** · 03-23-2008, 10:14 AM

how would I achieve this in css:

**sandyk3** · 03-23-2008, 11:29 AM

Hi Matt,

I just created this on the fly. I think this is what you are looking for, I'm not sure. You can adjust the padding/margins as you like. I think you meant to say that you are wanting 20px margin around each box. The padding is withing the box, taking the text away from the outter edge. I included padding in it as well. I put it through browswershots as well:

http://browsershots.org/http://sandy...om/4boxes.html

Good Luck! Here it is:

http://sandysdesignline.com/4boxes.html

**MattCoops** · 03-23-2008, 01:48 PM

That looks good in other browsers, but in IE has no seperation in header boxes at top.

More than 90% of this site's users will be using IE.

**sandyk3** · 03-23-2008, 02:31 PM

Hi Matt,

I am trying myself to understand the hack for this. LadynRed suggested this site:
http://www.positioniseverything.net/
As a beginner it's hard for me to understand this. Maybe you can understand it better than me. Please, if you find out how to hack this, will you please post it. I'll be watching this post. I will also still be trying to correct it as well.

**LadynRed** · 03-24-2008, 12:23 AM

I'll have to take a crack at it in the AM when I"m not so tired.
One thing I did see is that you're triggering the doubled-float margin bug when you have float:left then apply a margin-left - IE6 will DOUBLE the margin (same goes for float:right, margin-right).

The solution is to add display:inline to the floated box but do it in a separate CSS file that you then call with conditional comments - which only IE reads.

**LadynRed** · 03-24-2008, 10:48 AM

Ok, try this instead:

Main CSS file:

Quote:

body {
text-align: center;
margin: 0;
padding: 0;
}
#box1, #box3, #box4, #box1and2, #box3and4{
margin: 0;
padding: 0;
}
#wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #000000;
background-color: #999999;
text-align: justify;
width: 800px;
border: thin solid #000000;
/*height: 500px;*/
position: relative;
margin: 0 auto;
}
#box1and2 {
height: 150px;
/*width: 800px;*/
margin: 20px 0;

}
#box1 {
text-align: justify;
height: 150px;
width: 210px;
border: thin solid #000000;
float: left;
margin: 0 20px;
background-color: #9966FF;
}
#box1 p, #box2 p, #box3 p, #box4 p{
padding: 3px 10px;
}

#box2 {
width: 530px;
border: thin solid #000000;
height: 150px;
background-color: #CCFF66;
margin: 0 0 0 245px;
}

#box3and4 {
height: 340px;

}
#box3 {
height: 300px;
width: 210px;
border: thin solid #000000;
float: left;
margin-right: 20px;
margin-left: 20px;
background-color: #3399CC;
}
#box4 {
height: 300px;
width: 530px;
border: thin solid #000000;
margin-left: 245px;
background-color: #66FF66;

}

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

IE fixes css file:

Quote:

/*kills the doubled-float margin bug */
#box1, #box3{
display: inline;

}

HTML

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Untitled Document</title>

<link href="4boxes_files/4boxes.css" rel="stylesheet" type="text/css">



</head>
<body>
<div id="wrapper">
<div id="box1and2">
<div id="box1"><p>some text or possible the logo for the company</p></div>

<div id="box2"><h1>Headline for the company or a banner</h1></div>
</div>
<div id="box3and4">
<div id="box3"><p>Sidebar for links</p></div>
<div id="box4"><p>content for each page</p>
<p>Whatever you want you can put in here</p></div>
</div>

</div>
</body>
</html>

Works in Firefox and IE 6

**MattCoops** · 03-25-2008, 09:08 AM

That is outstanding. Thank you LadyNRed.
Do you have a link to a portfolio or something that we can give credit to you for layout?

**LadynRed** · 03-25-2008, 01:23 PM

You're welcome. No, I don't currently have a portfolio, but I appreciate the thought

**sandyk3** · 03-25-2008, 11:13 PM

Hi Matt and LadynRed,

She beat me to the answer, LOL. I am trying to learn from LadynRed and I did come up with a different answer. It works in all browsers as I put it through browsershots.org.

http://sandysdesignline.com/4boxes1.html

The margins are off and so is the padding because I was playing with it and when I finally got it, I was excited!!

My two cents...

**LadynRed** · 03-25-2008, 11:46 PM

There's almost always more than one way to do a layout.. different people have different approaches. As long as it works, you're good !

Good job, Sandy !