CODEWITHSUNDEEP
css
Thejazz
Thejazz

Reputation: 23

CSS: nowrap div's children divs going crazy when added content

I'm trying to make a layout where I have a Div that gets added its content in a dynamic way. I want this "parent" div to have a fixed height and when content its added the div grows horizontally as needed.

This is the test HTML I made to isolate the problem.

<html>
<head>
  <link rel="stylesheet" href="styletest.css" />
</head>
<body>
  <div style="width:700px;overflow:auto">
    <div class="anio">
      <div class = "semestre">
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
      </div>
    </div>
  </div>    
</body>
</html>

Here i have 7 class=floater divs that go into the class=semestre container div which is supposed to grow horizontally as I add more class=floater divs. all of this goes into a fixed width div with overflow-x:auto.

after some fighting with the css i managed the following:

div.floater { 
    margin: 4px;
    width: 110px;
    height: 82px;
    border: 1px solid #ccc;
    display: inline-block; /*this to make the floaters go horizontal*/
}
div.semestre{  
    white-space: nowrap; /* this avoid the floater overflowing under the parent div*/
    margin-top: 5px;
    margin: 2px;
    height: 90px;
    border: 1px solid #ccc;
    min-width:98%;

}
div.anio{
    margin : 2px;
    border: 1px solid #ccc;
    min-width:98%;

}

So this worked..kind of.. the class=floater divs go horizontal and cause the activation of the overflow-x on the outermost div, but the container divs that contain the class=floater div don't grow as i think the should (this can be seen by the borders not growing). After googling I found some proposed solutions like adding width:auto on top of the min-width: css property or floating them, but none worked. This is a minor issue since the borders are just for formatting.

The mayor problem I'm having is when I try to add content to the class=floater divs they just go CRAZY and won't stay where they should( when they had no content). i tried reverting the white-space:nowrap by adding white-space:normal to the floater class but that didn't work. After that I just went berserk and started trying random stuff and managed to fix my first problem but the I forgot what I did and went back to step 1 D:.

To be honest I'm very new to html/css and I'm learning by doing. So if this question has been already asked/answered believe me that I searched for it. Also excuse my English, doing my best.

Thank you for your time.

edit: By request, the fiddle :D http://jsfiddle.net/UBYKy/1/ there you can see both of my problems.

edit 2: i believe i have found a solution to both problems. For the first one I solved it by adding display: inline-block to the parent divs and for the 2nd problem I added vertical-lign:top to the floater class css(as afshin suggested) and it works just fine. I hope this helps anyone having the same problem.

Upvotes: 2

Views: 1781

Answers (1)

Afshin
Afshin

Reputation: 4215

I think you should use this 

div.floater { 
 vertical-align:top;
 margin: 4px;
 min-width:110px;
 width: auto;
 height: 82px;
 border: 1px solid #ccc;
 display: inline-block; /*this to make the floaters go horizontal*/
}

DEMO

Upvotes: 2

Related Questions