CSS Forum

**march11** · 08-13-2009, 02:51 PM

A noob here, sorry. I am trying to position three "column" divs underneath this arrangement, but to no avail. I'd like the columns to be 22.5% width each with probably about 350 px. I just cannot figure out how to do this and I am seriously in need of some guidance -- could someone post some coding to get me through this hurdle?? Basically the reason the columns would be 22.5% in width each is to completely fill the container by 80% (the idea is to make it look like one solid bar underneath, where I can tinker with padding, etc). I have removed all the crazy coding I did before to try and fit the three columns underneath so that someone else can give this a try. Thanks in advance!!

HTML:
<html>
<head>
<link REL=StyleSheet HREF="school.css" TYPE="text/css" MEDIA=screen>
<body>

<div id="container">

<div id="top">

<div id="container1">

<div class="menu">
<ul>
<li><a href="school.html"> HOME </a></li>
<li>|<a href="aboutschool.html"> ABOUT US </a></li>
<li>|<a href="programmes.html"> PROGRAMMES </a></li>
<li>|<a href="products.html"> PRODUCTS </a></li>
<li>|<a href="funding.html"> FUNDING </a></li>
<li>|<a href="booking.html"> BOOKING US </a></li>
</ul>
</div>
</div>

</div>

<div id="container2">

<div id="left"> </div>
<div id="middle"> </div>
</div>

</div>

</body>
</head>
</html>

CSS:

body, html {
width: 100%;
height: 100%
}

body {
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
font-size: 15 px;
line-height: 1.5 em;
color: #fff;
background: #4F74B0;
text-align: center;
}

#container {
margin: 0 auto;
padding-right: 10%;
padding-left: 10%;
width: 80%
}

#top {
height: 50px;
background: url(topbar.png) repeat-x;
}

#container1 {
margin-top: 25 px;
height: 49 px;
float: right;
}

.menu {
clear: right;
float: right;
margin-top: 25 px;
}

.menu ul {
list-style: none;
padding: 0 px;
margin: 0 px;
}

.menu li {
display: inline;
}

.menu li a {
font-size: 12 px;
font-weight: light;
text-decoration: none;
text-align: right;
color: white;

}

.menu li a:hover {
color: #ACADAD;
}

#middle {
margin-top: 3%;
width: 80%;
height: 300px;
border-style: solid;
border-size: 1px;
border-color: white;
}

#container2
{
margin-top: 0%;
margin-left: 0%;
width: 100%;
display: inline;
}

#left
{
width: 17%;
height: 55%;
background-color: white;
float: left;
margin-right: 2%;
}

#middle
{
margin-top: 2%
width: 80%
height: 50%
border-style: solid;
border-size: 2 px;
border-color: white;
float: left;
}

**LadynRed** · 08-13-2009, 03:43 PM

Quote:

border-size: 1px;

This caught my eye - there is no such property border-size, it's border-width. You can write the border like this: border 2px solid white;

Secondly, make sure you CLEAR your floats (see the stickies here). In this case, adding overflow:auto to #container is all you need. You will likely have to clear other floats as well.

You're not really all that far off. I would suggest you either forgo nailing down heights on the divs, or , for now, give them a fixed pixel height until you get the layout issues worked out. Once you get something IN the divs, you can go back to your percentages.

If you want #left to be even at the top with #middle, give #left the same top margin as #middle has.

**march11** · 08-14-2009, 12:02 PM

This layout works perfectly in Safari, but something very odd happens when it gets to Firefox and IE. I don't know what I'm doing wrong.

body {
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
font-size: 15 px;
line-height: 1.5 em;
color: #fff;
background: #4F74B0;
text-align: center;
display: inline;
positioning: absolute;
}

#container {
margin: 0 auto;
width: 800 px;
overflow: auto;
border: 2px white solid;
padding: 5px 5px 5px 5px;
}

#top {
height: 50px;
background: url(topbar.png) repeat-x;
}

#container1 {
margin-top: 25 px;
margin-left: 200px;
height: 49 px;
float: right;
display: inline;
}

.menu {
clear: right;
float: right;
margin-top: 25 px;
}

.menu ul {
list-style: none;
padding: 0 px;
margin: 0 px;
}

.menu li {
display: inline;
}

.menu li a {
font-size: 12 px;
font-weight: light;
text-decoration: none;
text-align: right;
color: white;

}

.menu li a:hover {
color: #ACADAD;
}

#middle {
margin-top: 10 px;
margin-left: 10 px;
width: 635 px;
height: 300 px;
border-style: solid;
border-width: 1px;
border-color: white;
float: right;
}

#left
{
clear: both;
margin-top: -25px;
width: 150 px;
height: 337 px;
background-color: white;
float: left;
margin-right: 0 px;
}

#container2 {
margin-top: 350 px;
width: 800 px;
}

.bottom1
{
width: 290 px;
height: 350 px;
background-color: grey;
padding: 5px 5px 5px 5px;
float: left;
}

.bottom2
{
width: 240 px;
height: 350 px;
background-color: white;
padding: 5px 5px 5px 5px;
float: left;
}

.bottom3
{
float: left;
width: 240 px;
height: 350 px;
background-color: white;
padding: 5px 5px 5px 5px;
}

<html>
<head>
<link REL=StyleSheet HREF="school.css" TYPE="text/css" MEDIA=screen>
<body>

<div id="container">

<div id="top">

<div id="container1">

<div class="menu">
<ul>
<li><a href="school.html"> HOME </a></li>
<li>|<a href="aboutschool.html"> ABOUT US </a></li>
<li>|<a href="programmes.html"> PROGRAMMES </a></li>
<li>|<a href="products.html"> PRODUCTS </a></li>
<li>|<a href="funding.html"> FUNDING </a></li>
<li>|<a href="booking.html"> BOOKING US </a></li>
</ul>
</div>
</div>

</div>

<div id="left"> </div>
<div id="middle"> </div>

<div id="container2">

<div class="bottom1"> </div>
<div class="bottom2"> </div>
<div class="bottom3"> </div>

</div>

</body>
</head>
</html>

**march11** · 08-14-2009, 01:58 PM

Thanks for the help. I tried absolute positioning at the bottom but of course this ran into serious problems in IE. Then I tried to float these in another container, that ran at the bottom much like container 1, and this container did not show up at all in IE and in Firefox, this solution became a nightmare.

When I cleared the floats, it showed up OK in Safari and then I used top-margin to push them down. I'm so annoyed with this and am just looking for a hint!

I did take your advice in changing the percentages to fixed pixel. I am actually going to try and keep it at fixed pixel because I'll be replacing some of the divs with images, but I'm using them as place-holders at the moment...

I just don't know what to do in order to arrange these three-columns underneath in a good way, it's extremely frustrating. Do you have any more advice? I don't want to use tables and resort to being a lazy coder!

**LadynRed** · 08-14-2009, 03:29 PM

When you say you want 3 columns 'underneath'.. underneath what ? The menu ?
Which columns do you want lined up ? I see #left, and #middle, what's the 3rd? I just want to be clear on what you want so I know what to give you.

**LadynRed** · 08-14-2009, 04:04 PM

Ok, see if this is what you're after. Adjust the dimensions as needed to suit you, I just plugged in some numbers to get it looking right. I put in colored borders so I could SEE what was going on.

Quote:

body, html {
/* width: 100%;*/
height: 100%

}

body {
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
font-size: 15 px;
line-height: 1.5 em;
color: #000;
background: #4F74B0;
text-align: center;
}

#container {
margin: 0 auto;
padding-right: 10%;
padding-left: 10%;
width: 80%
height: 100%;

overflow: auto;
border: 1px solid orange;

}

#top {
height: 50px;
background: url(topbar.png) repeat-x;
overflow: hidden;
border: 1px solid green;

}

#container1 {
margin-top: 25 px;
/*width: 80%;
float: right;*/
overflow: auto;
border: 1px solid yellow;

}

.menu {
width:70%;
float: right;
margin-top: 25px;
}

.menu ul {
list-style: none;
padding: 0 px;
margin: 0 px;
}

.menu li {
display: inline;
}

.menu li a {
font-size: 12 px;
font-weight: light;
text-decoration: none;
text-align: right;
color: white;

}

.menu li a:hover {
color: #ACADAD;
}

#middle {
margin-top: 3%;
width: 80%;
height: 300px;
border: 1px solid white;
}

#container2
{

height: 500px;
overflow: auto;
/*display: inline;*/
border: 1px solid magenta;
}

#left
{
width: 17%;
height: 200px;
background-color: white;
float: left;
margin-right: 2%;
margin-top: 3%;
}

#middle
{
margin-top: 2%
width: 80%
height: 50%
border-style: solid;
border-width: 2 px;
border-color: white;
float: left;
}

Quote:

<div id="container">

<div id="top">

<div id="container1">


<ul class="menu" >
<li><a href="school.html"> HOME </a></li>
<li>|<a href="aboutschool.html"> ABOUT US </a></li>
<li>|<a href="programmes.html"> PROGRAMMES </a></li>
<li>|<a href="products.html"> PRODUCTS </a></li>
<li>|<a href="funding.html"> FUNDING </a></li>
<li>|<a href="booking.html"> BOOKING US </a></li>
</ul>

</div>

</div>

<div id="container2">

<div id="left"></div>
<div id="middle"></div>
</div>

</div>

I did take out the container you had around the menu as I didn't see any real need for it, at least with what you have here so far. The class can go on the ul just as easily.

**serandfae** · 06:49 PM

Care to tell us what it's doing or post a link?

positioning:absolute? No such selector. It's position:absolute; and chances are pretty good that you don't need it. Check the stickies here for when and when not to use AP.

And this is how you write a link -- get rid of the all caps and that media thing:

<link href="style.css" rel="stylesheet" type="text/css" />

tim