CODEWITHSUNDEEP
css
Bekki
Bekki

Reputation: 729

Align 2 divs on either side of a parent div

I've got the below div structure

<div id="news">
   <div id="innerNews">
      <div id="newsLeft" style="width:10%; height:100%"></div>
      <img id="newsThumb" src="nwes.png" width="80%" />
      <div id="newsRight" style="width:10%; height:100%"></div>
   </div>
</div>

#news{
  width:30%;
  position: relative;
}
#innerNews{
  position: absolute;
  width: 100%;
  height: 100%;
}

How can I get #newsLeft to be aligned to the left and #newsRight to be aligned to the right of #news?

Upvotes: 1

Views: 1535

Answers (3)

Cheslab
Cheslab

Reputation: 1924

CSS Table

Because of your structure I'd recommend to use display: table; thereby you'll get equal column height. Also depending on what you are trying to do you can substitute middle column by another div and set a background to it, so you would be able to place some content in it.

#news {
    display: table;
    height: 150px;
}
#innerNews {
    display: table-row;
}
#newsLeft, #newsThumb, #newsRight {
    display: table-cell;
}
#newsLeft, #newsRight {
    background-color: firebrick;
    width: 11%
}
<div id="news">
   <div id="innerNews">
      <div id="newsLeft"></div>
      <img id="newsThumb" src="http://placehold.it/350x150" />
      <div id="newsRight"></div>
   </div>
</div>

Floating

Another way to do that is using float: left;. There is no point to use float: right; on the third div because you have total width of three blocks equal 100%: [10%][80%][10%].

#innerNews {
    height: 150px;
    width: 400px;
}
#newsLeft, #newsThumb, #newsRight {
    float: left;
}
#newsThumb{
    width: 80%;
    height: 100%;
}
#newsLeft, #newsRight {
    background-color: firebrick;
    width: 10%;
    height: 100%;
}
<div id="news">
   <div id="innerNews">
      <div id="newsLeft"></div>
      <img id="newsThumb" src="http://placehold.it/350x150" />
      <div id="newsRight"></div>
   </div>
</div>

You can remove width from ##innerNews to achieve certain effect, but again - it depends on what you want.

Position

If you'd like to stick with position

#innerNews {
    height: 150px;
    width: 400px;
    position: relative;
}
#newsLeft, #newsThumb, #newsRight {
    position: absolute;
    top: 0;
}
#newsLeft {left: 0;}
#newsThumb {left: 10%;}
#newsRight {left: 90%;}
#newsThumb{
    width: 80%;
    height: 100%;
}
#newsLeft, #newsRight {
    background-color: firebrick;
    width: 10%;
    height: 100%;
}
<div id="news">
   <div id="innerNews">
      <div id="newsLeft"></div>
      <img id="newsThumb" src="http://placehold.it/350x150" />
      <div id="newsRight"></div>
   </div>
</div>

Upvotes: 3

Sooraj
Sooraj

Reputation: 10567

Here is how you can do it. Use position attribute as required.

#news{
  width:50%;
  height:200px;
  position: relative;
  background:#ccc;
  margin-left:100px;
  display:inline-block;
}
#innerNews{
  position: absolute;
  width: 100%;
  height: 100%;
  
}

#newsLeft
{
  position:absolute;
  height:200px;
  width:200px;
  left:-30px;
  background:#444;
  display:inline-block;
  width:30%; height:100%
  }

#newsRight
{
  position:absolute;
  height:200px;
  width:200px;
  left:230px;
  background:#444;
  display:inline-block;
  width:30%; height:100%
  }
<div id="news">
   <div id="innerNews">
      <div id="newsLeft" >newsleft</div>
      <img id="newsThumb" src="nwes.png" width="80%" />
      <div id="newsRight" >newsright</div>
   </div>
</div>

Upvotes: -1

Alekos Filini
Alekos Filini

Reputation: 324

You can use the css float, like

#newsLeft {
    float: left;
}

#newsRight {
    float: right;
}

Upvotes: -1

Related Questions