CODEWITHSUNDEEP
javascripthtmlcsscss-float
user1349760
user1349760

Reputation: 31

css floating 2 siblings within a fixed width and one sibling contains ellments which push the sibling

Its quite hard explain this issue I have, as there are alot of variables.

I have site which which uses javascipt to resize a fixed wrap depenping on screen relsolution, so all the div have to resize to 3 different widths, this is what it making this problem so dificult..

HTML

<div id="wrap" >
  <div id="content">
    <div class="sideNav" >/* This is not static in the markup so when its not in the markup the rest of the content will take its space as everything is 240px in width*/
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </div>
    <div class="contentContainer">/* this needs to resize to  */
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
        <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>    
    </div>
  </div>
</div>

CSS

.wrap {
  width: 960px; or width: 1110px; or width: 1350px depending on screen res; /* all sizes which would fix 240px 4,5 or 6 times across*/
}
.sideNav {
width: 240px;
float: left;
}
contentContainer {
float: left;
}
.item {
width: 240px;
width: 180px;
}

obviously once there are more than 3 items the .contentContainer is then pushed below the .sideNav because there is not enough room. I cant float the .sideNav and put a 240px left margin because sometimes the .sideNav wont be there, is there anyways to fix this and find an equilibrium so that the content flows on he page nicely...

Ive only been learning css for 2 months now so they maybe a solution im not aware of.... I dont really know or understand css LESS but maybe an answer there?

I can post the full markup and css if necessary

Just want to say thank in advance to anyone who can help!

Upvotes: 0

Views: 180

Answers (2)

Morten Hagh
Morten Hagh

Reputation: 2113

If all your images in your list is the same dimensions, set them with

.item img { width: 240px; height: 180px; }

instead of having the same style on every image.

Actually it is best to set the width="240" and height="180" in your img to reduce page load time, i.e. to "tell" the browser of the exact dimensions of your image(s).

Upvotes: 0

Bastian Rang
Bastian Rang

Reputation: 2187

You can use percentages for your items, like .time{ width: 20%}. They resize according to your .contentContainer-Elements width, which you can set to width: 100%. Have an eye for your paddings and margins, because they add up to your width in default browser box-mode.

Upvotes: 1

Related Questions