CODEWITHSUNDEEP
htmlcsslayout
user984003
user984003

Reputation: 29557

CSS page layout, keep text in its own div column

I have a page layout with two div. They are both float:left and so appear as columns next to each other. I want them to stay that way. However, if the text in the right-most div is too long then the whole text moves down below the left most column. This also happens if the text is short, but I make the browser window smaller. What I want is for the long text to take up more lines, but only within its own right column.

CSS:

.left{float:left}
.right{float:left}

HTML:

<div id="container">
    <div class = "left">
         <span>some text</span>
    </div>
    <div class = "right">
        <span>some long text....</span>
    </div>
</div>

Edit: Also, the left column should stay fixed.

Upvotes: 3

Views: 5031

Answers (3)

user984003
user984003

Reputation: 29557

I was able to solve it with a table. When the window is made smaller, at first only the right column is made smaller and the words squeeze down on more lines until the column has disappeared. If the browser is made smaller than the width of the left column, then the left column starts disappearing, cutting off words. Works in my Chrome and IE although I don't know about older IE.

.td_right{vertical-align:top; max-width:300px;}
.td_left{vertical-align:top; min-width:300px; width:300}

<table >
    <tr> 
        <td class = "td_left">
            stuff here
        </td> 
        <td class = "td_right">
            stuff here 
        </td>
    </tr>
</table>

Upvotes: -2

Adam Grant
Adam Grant

Reputation: 13105

Sounds like you want to do something like this:

http://jsfiddle.net/VV4Hc/8/

The outer container specifies the width those two divs should occupy. As you can see, they also have percentage widths so you can change the container's property without having to go back and change the divs.

Word of warning, remember to clear your floats as well, so other elements don't get "caught" in the float. To do that, just define an element with the property clear:both like this:

.container {
  width: 1000px;
  margin: 0px auto; /* This will center the container on the page. */
 }
.left, .right {
   float: left; 
   width: 50%;
}
.clearfix {clear:both;}

<div class="container">
  <div class="left">...</div>
  <div class="right">...</div>
  <div class="clearfix"></div>
  <p>I won't get caught.</p>
</div>

If you're looking to do this for layout, you may want to consider a CSS framework, which has these sorts of things perfectly measured based on a specified number of columns. See:

Upvotes: 4

Anishdev
Anishdev

Reputation: 9

You can set the positions for those divs like

.left{width: 50%; position:relative; top:0%; left:0%;}
.right{width: 50%; position:relative; top:0%; left:50%;}

Upvotes: 0

Related Questions