Centering DIVs?

**gsmile** · 06:05 PM

So I've got a two-column layout and a header CSS div on my page. But then for some reason, the main content is below the sidebar. I've tried

HTML Code:

float : left

and everything else; it still doesn't work.
Any suggestions?
EDIT:
This is the code.

HTML Code:

} 
#top { 
width : 700px;
margin : 0 auto;
text-align : left;
} 
body { 
text-align : center;
} 
#side { 
width : 200px;
text-align : left;
float : left;
clear : both;
} 
body { 
text-align : center;
} 
#cmain { 
width : 560px;
margin : 0 auto;
margin-left : 340px;
text-align : left;
float : left;
clear : both;
}

**ADAM Web Design** · 05-19-2007, 06:06 PM

clear : both; <-- that clears the left float. Take that out.

**gsmile** · 05-19-2007, 06:12 PM

Both of the clear : both's?

**gsmile** · 05-19-2007, 06:36 PM

So basically, I need two divs under a parent div that are on the same line.

**taketherisk** · 05-19-2007, 08:13 PM

Code:

#wrapper { 
text-align : center;
margin: 0px auto;
} 
#top {
width : 760px;
text-align : left;
} 
#side { 
width : 200px;
text-align : left;
float : left;
clear: left;
} 
#cmain { 
width : 560px;
text-align : left;
float : left;
}

See how that goes, don't forget to add the <div id="wrapper"></div> around everything.

Good luck

-Brett

**taketherisk** · 05-19-2007, 09:16 PM

Code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#wrapper { 
text-align : center;
margin: 0px auto;
} 
#top {
width : 760px;
text-align : left;
border: 1px #000 solid;
} 
#side { 
width : 200px;
height: 600px;
text-align : left;
border: 1px #000 solid;
float: left;
} 
#cmain { 
width : 760px;
text-align : left;
height: 600px;
border: 1px #000 solid;
}
-->
</style>

</head>
<body>
<div id="wrapper">

<div id="top">
banner
</div>

<div id="cmain">
<div id="side">
side bar
</div>
Content
</div>

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

Here you go, i have tested this one...

**whooligan** · 01:28 AM

I have issues centering div's in IE from time to time. . . when all else fails I use

Code:

<div id="whatever" align=center>

and be sure I be sure to include this:

Code:

#whatever {
text-align: left;
}

I don't know what my issue is sometimes, but it's frustrating and as opposed to beating my head against my keyboard I use this approach.

. . . though maybe that wasn't your question (centering it)

**LadynRed** · 11:31 AM

You need to do 2 things to center a div and have it work cross-browser.

For non-IE browsers-
on your #wrapper (the container you want centered that holds everything else), make sure your #wrapper has a width defined and add

margin: 0 auto;
text-align: left; <-- puts the text back where it belongs

For IE add:
body{
text-align: center;
}

Adding "align: center" is not a good solution and should be avoided.

**gsmile** · 05-20-2007, 01:10 PM

Thanks a lot!! Talkputation added.

Quote:

Originally Posted by taketherisk

Code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#wrapper { 
text-align : center;
margin: 0px auto;
} 
#top {
width : 760px;
text-align : left;
border: 1px #000 solid;
} 
#side { 
width : 200px;
height: 600px;
text-align : left;
border: 1px #000 solid;
float: left;
} 
#cmain { 
width : 760px;
text-align : left;
height: 600px;
border: 1px #000 solid;
}
-->
</style>

</head>
<body>
<div id="wrapper">

<div id="top">
banner
</div>

<div id="cmain">
<div id="side">
side bar
</div>
Content
</div>

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

Here you go, i have tested this one...

**gsmile** · 05-20-2007, 08:20 PM

Now it works in FF but not in IE! And ideas?

**sappro** · 05-20-2007, 08:58 PM

Add:

Code:

margin: 0px auto;

to "#top" and "#cmain" and it should work in both!

I think. I hope. Maybe.

**taketherisk** · 05-20-2007, 11:56 PM

add

Code:

body{
text-align: center;
}

**gsmile** · 05-21-2007, 01:15 AM

But then that makes the #cmain wrap around the #side, and when the #side ends, the #cmain takes up its space and gets bigger. But then I want the #side and #cmain to be seperate, the #wrapper wrapping it.
So how does it go?

**LadynRed** · 05-21-2007, 01:41 PM

Ok, lets see the ACTUAL CODE. I gave you the answer you needed to center in IE and FF, you apparently chose to ignore that. The text-align: center should NOT make things shift the way you describe, but floats will if not cleared properly or if your widths are too wide.

**gsmile** · 05-21-2007, 10:50 PM

Quote:

Originally Posted by LadynRed

Ok, lets see the ACTUAL CODE. I gave you the answer you needed to center in IE and FF, you apparently chose to ignore that. The text-align: center should NOT make things shift the way you describe, but floats will if not cleared properly or if your widths are too wide.

I DO have it. It's okay on the main page, but when you click on a post ( use wordpress), the #cmain is down under below the #side, not beside. Here's the code:

Code:

} 
body { 
text-align : center;
} 
#wrapper { 
text-align : center;
margin : 0 auto;
position : relative;
width : 800px;
} 
body { 
text-align : center;
} 
#top {
width : 800px;
margin : 0 auto;
text-align : left;
} 
body { 
text-align : center;
} 
#side { 
width : 200px;
text-align : left;
float: left;
} 
body { 
text-align : center;
} 
#cmain { 
width : 560px;
margin-left : 200px;
text-align : left;
}

**LadynRed** · 05-22-2007, 02:15 PM

Lets see the HTML too. Is that ALL the CSS code ?

**gsmile** · 05-22-2007, 06:37 PM

Not all-- that's the div part.

Code:

<body>
<html>
<div id="wrapper">
<div id="top">
TOP STUFF


<div id="side">
<div class="content">
SIDE STUFF

</div>
</div>

<div id="cmain">
    <div id="content" class="narrowcolumn">
MAIN STUFF

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

**gsmile** · 05-23-2007, 06:30 PM

Any ideas?

**taketherisk** · 05-24-2007, 12:10 AM

Ok this code works on FireFox 2, IE 7, IE 6, Opera 8.5

Code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
  text-align: center;
}
#wrapper { 
text-align : center;
margin: 0px auto;
width: 760px;
} 
#top {
width : 760px;
text-align : left;
border: 1px #000 solid;
} 
#side { 
width : 200px;
height: 600px;
text-align : left;
border: 1px #000 solid;
float: left;
} 
#cmain { 
width : 760px;
text-align : left;
height: 600px;
border: 1px #000 solid;
}
-->
</style>

</head>
<body>
<div id="wrapper">

<div id="top">
banner
</div>

<div id="cmain">
<div id="side">
side bar
</div>
Content
</div>

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

Good luck with your site