HTML Forum

**Nathand** · 09-16-2007, 07:36 PM

I need to split up the pages content into two differently sized parts, they'll be centered in the middle of the page.

Right now I have a div that is centered, and then I have a table with two columns to split up the content inside the div. Would it be better to have two divs inside the centered div, or to have a table with two columns inside the centered div?

**joder** · 09-16-2007, 08:03 PM

div's, since div's are for layout and tables for tabular data.

**Nathand** · 09-16-2007, 08:51 PM

Ok, so how to I align the divs side by side? When I change them from table cells to divs instead of aligning side by side one drops vertically below the other?

**coolkbk585** · 09-16-2007, 10:18 PM

Well, first of all, make sure that the divs that you are making are not too wide for the are that you are putting them in.

If they aren't, then you need to float them to make them next to each other. This is because divs are a block-level element.

http://www.w3schools.com/css/pr_class_float.asp < Read up on floats.

**joder** · 09-16-2007, 11:23 PM

Here are some templates and info that will help
http://www.intensivstation.ch/en/templates/
http://css-discuss.incutio.com/?page=FloatLayouts
http://www.alistapart.com/articles/multicolumnlayouts

**Nathand** · 09-17-2007, 11:20 AM

I cannot get this working with div's. Could someone post some sample code that has two div's aligned side-by-side inside a container div that has a border around it?

I really have been trying, I just can't figure out anything that will work in both ie and ff.

Thanks for the help,
Nathan

**joder** · 09-17-2007, 12:24 PM

This is the basic outline:

HTML Code:

#container{
}

#left {
}

#right {
    float:right;
}

I left the container and left with nothing in them just to show them here. You can add what you need.

In the html page

HTML Code:

<div id="container">

    <div id="left">
       Content of left div
    </div>

    <div id="right">
        Content of right div
    </div>

</div>

**Nathand** · 09-17-2007, 12:33 PM

That doesn't work Joder. If you add a background color to the left and right divs you will see that they are not side by side, they get stacked up on eachother vertically, which is what I'm trying to avoid...

**joder** · 09-17-2007, 12:44 PM

Here how I do it, maybe someone else has a better way. On one div (left or right) I add a width
Example:
width: 15em
On the other div I add a margin. Let's assume you added a width to the right div, then on the left
margin-right: 18em;

The margin is larger because it doensn't line up right making it the same as the width of the div.

You may have to play with the numbers and look in different browsers.

**LadynRed** · 09-17-2007, 02:18 PM

If you float the div you MUST give it a width.
Things to consider -
How wide is your container ?
How wide is your left div including margins, padding and borders ?
How wide is your right div including margins, padding and borders ?

Does the drop occur only in IE or is it happing in Firefox or Opera ?
IE has MANY bugs related to floats because of its broken box model, you may have run into one (or more) of them.

The total width of the right and left, with margins and padding and borders, must NOT be wider than the container width.

**Nathand** · 09-17-2007, 04:05 PM

Ok. Here's the code I'm having the most success with:

Code:

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

<html>
<head><title></title>

<style type="text/css">

body {
margin: 0 0 0 0;
}

div.divcontainerbody {
margin-right:auto;
margin-left:auto;
width:750px;

background-color: red;
padding: 0 0 0 0;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
position: relative;
}

div.divmainbody{
background-color: blue;
height: 200px;
width: 575px;
float:left;
display: table;
}

div.divleftmenu{
background-color: green;
height: 200px;
width: 175px;
float: left;
display: table;
}

</style>
</head>
<body>

<br><br><br><br> <!-- This just to moves it down a little for testing -->
<div class="divcontainerbody"> <!-- Create a container Div -->

<div class="divleftmenu">
I am the left div, "divleftmenu"
</div>

<div class="divmainbody">
I am the right div, "divmainbody"
</div>

</div> <!-- End of container Div -->

</body>
</html>

This works in ie, however in firefox something weird happens. It's kind of hard to describe this (it would be easier to just copy/paste the code and try for yourself), but the borders of the containing div kind of scrunch up and it appears that the two other divs are outside of the container div...

**Nathand** · 09-17-2007, 04:47 PM

One thing I forgot to add, is that with the above code, if I change "position: relative;" to "position: absolute;" in "div.divcontainerbody" then the problems go away. But then all the divs are aligned to the left side of the page.

**joder** · 09-18-2007, 12:34 AM

HTML Code:

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

<html>
<head><title></title>

<style type="text/css">

body {
    margin: 0;
    }

div.divcontainerbody {
    margin: 5em auto;
    width:750px;
    background-color: red;
    padding: 0;
    border: 5px solid black;
    height: 200px;
    }

div.divmainbody{
    background-color: blue;
    width: 575px;
    float:right;
    height: 200px;
    position: relative;
    }

div.divleftmenu{
    background-color: green;
    width: 175px;
    float: left;
    height: 200px;
    position: relative;
    }

</style>
</head>
<body>

<div class="divcontainerbody"> <!-- Create a container Div -->

<div class="divleftmenu">
I am the left div, "divleftmenu"
</div>

<div class="divmainbody">
I am the right div, "divmainbody"
</div>

</div> <!-- End of container Div -->

</body>
</html>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!