Force 2 Divs in a row.

  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Hi, I'm trying to replace some of the tables on my site into divs. One table I am trying to replace should be simple, but when I try to put the divs in a row, the 2nd div keeps going under the left div. I think it thinks it doesn't have enough room or something. I google'd a bunch of times and tried every form of display, clear & float I could think of.

I replaced:
Code: [ Select ]
<table>
<tr>
<td>BODY CONTENT</td>
<td>RIGHT NAV</td>
</tr>
</table>
  1. <table>
  2. <tr>
  3. <td>BODY CONTENT</td>
  4. <td>RIGHT NAV</td>
  5. </tr>
  6. </table>


With:
Code: [ Select ]
<div id="body_right_nav_wrapper">
<div id="bodycell">
BODY CONTENT
</div>
<div id="right_nav">
RIGHT NAV
</div>
</div>
  1. <div id="body_right_nav_wrapper">
  2. <div id="bodycell">
  3. BODY CONTENT
  4. </div>
  5. <div id="right_nav">
  6. RIGHT NAV
  7. </div>
  8. </div>


The current CSS I have is:
Code: [ Select ]
#body_right_nav_wrapper { }
#bodycell { float: left; }
#right_nav { float: left; width: 192px; }
  1. #body_right_nav_wrapper { }
  2. #bodycell { float: left; }
  3. #right_nav { float: left; width: 192px; }


Basically I just want the right div to be 192px. But the rest to make room of what is remaining, while staying in a row no matter what. :cry:
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

You can see if it's a width issue provided you're sure there's enough room in the container by giving the <div> elements an overflow of hidden for a moment.

If there's no change, I would start looking for generic rules elsewhere in the stylesheet that may be applying an unwanted "clear" to these elements. "padding" and "margin" are two other possible culprits.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

The table cell that contains the divs, has some padding on the right side, but I removed it and it still didn't work. I tried overflow: hidden; to no avail. But I realized something. It's only for pages where the content within the "bodycell" div needs as much room as it can get, where the right div gets pushed under the left one. For all the other pages, the content is as small as it can get. So I gave "bodycell" a width of 100%, but now the problem is just on all pages. I need a way to tell the "bodycell" to take up as much room as possible without pushing "right_nav" under it. I'm sure I've ran into this problem before a long time ago and just forgot about it, I'm such a div n00by.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

If I have 2 divs in a row. How can I give one a static width, and tell the other to "take up as much space" as possible (without forcing the one div under the other one)?
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6250
  • Loc: Seattle, WA

Post 3+ Months Ago

Might be easier to just float the right column within a div containing the content:

Code: [ Select ]
<div id="content">
MAIN CONTENT
<div id="right">
    RIGHT CONTENT
</div>
</div>
  1. <div id="content">
  2. MAIN CONTENT
  3. <div id="right">
  4.     RIGHT CONTENT
  5. </div>
  6. </div>


Code: [ Select ]
div#content {
width: 100%;
}

div#right {
float: right;
width: 192px;
}
  1. div#content {
  2. width: 100%;
  3. }
  4. div#right {
  5. float: right;
  6. width: 192px;
  7. }
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

I totally gave up and went back to HTML tables.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 36 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.