9 replies to this topic

[shawna]

Hi, I need to make rows in my layout. I'm doing it from pur css with no tables just divs. Here's what I have so far starting at "leftbar2" I want it to be a row as well as what I put below "rightbar" and "content"

body {
background: #ddd;
margin: 40px 0;
text-align: center;
}
#container {
width: 700px;
margin: 0 auto;
}
#header {
background: #fc784;
width: 100%;
height: 30px;
padding-top: 15px;
}
#content {
background: #ff99cc;
float: left;
width: 400px;
text-align: left;
}
#leftbar {
background: #f87c2;
float: left;
width: 150px;
}
#leftbar2 {
background: #f87c2;
float: left;
width: 150px;
}
#rightbar {
background: #f87c2;
float: right;
width: 150px;
}

[rc69]

Technically speaking, a div is a row, so you don't need to do anything special to make it so. The hard part about tables in CSS is the columns.

In other words, if you're making rows... just add a <div> and wala, you have a row. Of course, using float on a div will mess things up. Try taking that off.

Edited by rc69, 08 December 2005 - 04:25 PM.

[Ghost]

Also, if you want a div that stretches the entire way across the screen, you'll need to make the width:100%, otherwise you could take it out entirely

[shawna]

ok,I feel very dumb right now...lol

I put div id="blah' but it goes next to it instead of under it so,left bar 2 should take off the float? or all of them? I also haven't the slightest of how to make rounded corners with css for divs GAH!!

[Ghost]

Ok, you've lost me

But...I know how to do the round corners I was looking for it a few days ago Have you tried this tutorial?

[shawna]

lol well thx for the link.

What I meant was should I take off "float"? But I tried it and when i take it off it messes everything else up. when I try centering the content area,that messes up too. So I am totally lost on what else to do.
This is my html with the same css layout above

<div id="container">
<div id="header">
banner
<div id="leftbar">
<p>Link
<br>Link
<br>Link
</p>
</div>
<div id="leftbar2">
<p><img src="images/vidsub.gif">
</div>
<div id="content">
The center stuff
</div>
<div id="rightbar">
Some text on the right
</div>
</div>

[Ghost]

If thats the exact code, then your missing a closing

[shawna]

oh,I must have missed it when I was trying to cut out some of the blibberish I had to test it. But no,it's in my actual code though

[coolaid]

edit, you have to remove float:left;

if it messes up when you do that, you have to recode the layou then.

Edited by coolaid, 09 December 2005 - 04:40 PM.

[shawna]

I fixed it. It was ordered wrong...