homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

preventing div from wrapping underneath another div

10+ Year Member

Msg#: 3379480 posted 7:07 pm on Jun 26, 2007 (gmt 0)

I'm having a problem with a simple 2-column layout.

Here's the css:

body {margin-top: 0px; margin-left: 0px;}

#colA {float: left; background-color: #333300; width: 60%; padding-top: 20px;}

#colB {float: left; background-color: #999966; border: solid 1px #999966; width: 170px; margin-top: 100px; margin-left: 50px; text-align: center;}

and the markup...

<div id="colA">
Some text here.

<div id="colB">
<img src="image.jpg" align="right" border="0" alt="logo" width="170" height="118">

and the problem...

Unless the browser window is maximized (or at least nearly so), colB drops down underneath colA. I'd rather have colA and colB remain side by side no matter what, and if a horizontal scrollbar becomes necessary, so be it.

FWIW, I've also tried floating colB right as well.

I'm sure I'm missing something basic here. All clues are welcome.




WebmasterWorld Senior Member 5+ Year Member

Msg#: 3379480 posted 6:29 am on Jun 27, 2007 (gmt 0)

You'll probably want to just do it with absolute positioning. Just realize that absolutely positioned items don't take up flow... so you might have trouble putting stuff underneath it unless it has a fixed height. (and then there's javascript if it isn't fixed height)
If you don't need anything under it at all, then it's not an issue at all :)

Instead of float:left, for colA you give position:absolute;top:0;left:0
and for colB position:absolute;left:60%;top:0

The only other option I can think of by keeping the floats, is to use javascript (can't be done with current CSS technology because it's a mix of percentage and pixels) to size a container div to be equal to the width of the two other divs (including border margin and padding).

[edited by: Xapti at 6:31 am (utc) on June 27, 2007]


10+ Year Member

Msg#: 3379480 posted 2:50 pm on Jun 27, 2007 (gmt 0)

Worked like a charm. Many thanks.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved