CODEWITHSUNDEEP
csswidth
Damien
Damien

Reputation: 333

auto width with floating divs

I have a problem with two column both are with float left. When i add too much content in the right column, it goes under the left column.

My goal is that the right column use all the width available, but not goes under the forst column if there is too much content.

I have try to solve my problem with table-cell, but my left column has a precise height, so it seems not possible.

http://jsfiddle.net/#run&togetherjs=NGo7m4749M (sorry, we can't save with jsfiddle tight now)

CSS :

#contener {
    width : 800px;
    background-color : yellow;
    height : 500px;
}

#left {
    float : left;
    width : 100px;
    background-color : blue;
    height : 150px; 
}

#right {
    float :left;
   // If i let width : auto, this column goes under the other... :(
   width : 500px;
}

HTML

<div id="contener">
    <div id="left">Hello</div>
    <div id="right">Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis for.</div>
</div>

Thanks

Upvotes: 0

Views: 77

Answers (4)

Jtwa
Jtwa

Reputation: 143

Since you're floating the div's, they are no longer in the flow of the document and text will wrap around content.

So let's set the div's to a width in percentages. (We'll also apply the "clearfix" to our container div so we don't need to set heights. 

#left {
    float : left;
    width : 25%;
    background-color : blue;
}

#right {
  float :left;
  width : 75%;
  background-color:green;
}

Here is the clearfix 

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Let's set this class to our container div 

<div id="contener" class="clearfix" >

CodePen

Upvotes: 0

danrodi
danrodi

Reputation: 296

I'm not sure if I understood your question correctly, but in order to have the columns of the same size and not have them go under eachother you should add the following lines to the CSS properties:

#right {
    float: left;
    width: 500px;
    white-space: nowrap; // Resizes the right column according to the left column.
    overflow: auto; // Adds a horizontal scroll bar for the content.
}

For it to look better, you could remove the background-color : yellow; property from the container and add it to the right column, that way the result will be following: enter image description here

Upvotes: 0

singe3
singe3

Reputation: 2105

As I showed on the live fiddle you could add a div of class content in each section like that : 

<div id="contener">
    <div id="left">
        <div class="content">Hello</div>
    </div>
    <div id="right">
        <div class="content">Eminuit autem inter hu (...) </div>
    </div>
</div>

And the css (adding float:right and with:700px to #right and margin to .content)

#contener {
    width : 800px;
    background-color : yellow;
    height : 500px;
}

#left {
    float : left;
    width : 100px;
    background-color : blue;
}

#right {
    overflow:hidden;
    width:700px;
    float : right;
}

.content{
    margin:10px;   
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105843

You may float only first div and let other one stand aside and fill all space left avalaible :) http://jsfiddle.net/GCyrillus/p63fj61a/

#right {
    overflow:hidden;/* trigger layout to see floatting elements */
    min-width : 500px;/* min-width should be set on parent, not here actually */
}

Upvotes: 1

Related Questions