CODEWITHSUNDEEP
htmlcss
Aleksander
Aleksander

Reputation: 2815

Make div fill up rest of the parent

I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header. How do I do this with pure CSS?

What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left. Do you know of any better way to do this?

Here's a picture so it's easier to understand:

Example

Thanks, Aleksander

EDIT 1:

HTML:

<div class="header">
  <div class="header_left">
    <div class="pic"><img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /></div>
  </div>
  <div class="header_right">
    <div class="time">18m ago</div>
    <div class="name">Volkswagen</div>
  </div>
</div>

CSS:

.header {
}

.header_left {
  display: inline-block;
}   
  .pic {
    margin: 5px;
  }

.header_right {
  display: inline-block;
}
  .time {
    margin: 5px;
    float: right;
  }
  .name {
    margin: 5px;
    float:left;
  }

It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.

Upvotes: 0

Views: 286

Answers (3)

antony
antony

Reputation: 2893

It would be easier if you displayed your html. Here's an example based on your description. You can see this working in the fiddle here http://jsfiddle.net/Z68ds/18/

.header {
    overflow:hidden;
    padding: 4px;
    background: #ddd;
}

.caption {
    float: right;
    font-size: 0.9em;
}

.avatar {
    float: left;
}

.title {
    margin: 14px 0 0 38px;
}

<div class="header">
    <div class="caption">
        texty text2
    </div>
    <img class="avatar" src="https://i.sstatic.net/5dv0i.jpg?s=32&g=1" />
    <div class="title">texty text1</div>
</div>

Upvotes: 1

Wipster
Wipster

Reputation: 1570

Is this what you want to achive?

<div id="header">
  <img id="logo" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" />
  <p id="textRight">texty text2</p>
  <p id="textLeft">texty text1</p>
  <div class="clearer"></div>
</div>

/* CSS */

#logo {
    float: left;
}
#textRight {
    float: right;
}
#textLeft {
    clear: right;
    float: left;
}
.clearer {
    clear: both;
}

Here is a fiddle:

http://jsfiddle.net/T26cD/

Upvotes: 0

pzin
pzin

Reputation: 4248

You have to use overflow in the element you don't want to set a width without floating it.

#left {
  float: left;
  width: 100px;
}

#right {
  overflow: hidden;
}

This will force the #right element to cover the rest of its parent. No extra markup needed.

jsFiddle

Upvotes: 0

Related Questions