Need 2 text boxes side-by-side

Forum Moderators: not2easy

Message Too Old, No Replies

Need 2 text boxes side-by-side

m_leefs

4:21 am on Feb 26, 2004 (gmt 0)

I'm a newbie with css, so I apologize if this is a stupid question, but I really need some help. I have a 2 column site and within the first column (#content) I want to have 2 boxes of text that are side-by-side. But the boxes end up below each other--they are on the correct side, just not next to each other. Below are sections from the css and html page. Any help would be great!

#content{
float:left;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}

.left {
width: 20%;
background-color: #CCCCCC;
border: 2px solid #000000;
}

.right {
width: 70%;
border: 2px solid #000000;
float: right;
}

------------------------------------------

Birdman

4:30 am on Feb 26, 2004 (gmt 0)

The floated element should come first in the HTML. So, all you need to do is, reverse the order of the divs or leave them as is and float the left div instead.

Welcome to Webmaster World

m_leefs

4:54 am on Feb 26, 2004 (gmt 0)

Thanks Birdman. I changed the order of the div and the boxes are now side-by-side, however the text within the left box runs outside of the box now. What's going on?

grahamstewart

9:03 am on Feb 26, 2004 (gmt 0)

Looks correct to me in IE6 and Opera. What browser are you using and what doctype is on your page?

m_leefs

3:18 pm on Feb 26, 2004 (gmt 0)

//newbie alart//

If I understand right the doc type is as follows:

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

I have no idea what the above means, that's just what's at top whenever I make a new document.
Also I was looking at it on IE 5.2 on a Mac. I did try using Mozilla and Netscape--and they looked fine, but IE 5.2 had the text coming out of box! Why the inconsistency between browsers? Is there an easy way around this?

edisraf321

4:18 pm on Feb 26, 2004 (gmt 0)

Why the inconsistency between browsers? Is there an easy way around this?

Oh, how I wish there were. Our lives would be a whole lot easier... welcome to the wonderfully frustrating world of Web design.

As for Doctypes, read this: [alistapart.com...]

-Chris

csaccheri

6:16 pm on Feb 26, 2004 (gmt 0)

Add a "float: left" to your .left declaration and that should fix things. (IE5/Mac is fairly strict about floats -- you just need to make sure your float declarations are in the right place and that you have explicit widths declared for them.)

m_leefs

6:52 pm on Feb 26, 2004 (gmt 0)

Thank you csaccheri the float left worked. Now everything is happy and I am at peace. I was about to say screw it and use tables nested in tables. Thanks everyone!