CODEWITHSUNDEEP
htmlcss
automaticoo
automaticoo

Reputation: 888

Let div fill up space next to centered container

I have a webpage containing a centered container with content and I want to display a logo next to it.

The layout is as following: div - container. Where the container is centered and the div lef of the container needs to fill out the width left on the screen.

html, body {
 height: 100%;
 width: 100%;
}
#container {
 width: 800px;
 margin-left: auto;
 margin-right: auto;
 min-height: 100%;
}

<div id="container">

</div>
<div id="lef">
</div>

A jsfiddle with this code is available on http://jsfiddle.net/7QJQn/

Upvotes: 0

Views: 207

Answers (5)

i4h
i4h

Reputation: 861

If using flexbox is an option, you can do this with the flex-grow property:

With the following markup

<div class="main-row">
  <div class="filler"></div>
  <div class="row-content">Fixed width centered div</div>
  <div class="filler"></div>
</div>

you need to set flex-grow: 1 on the filler divs. See this fiddle.

Upvotes: 0

Jayx
Jayx

Reputation: 3966

Depending on which browsers you wish to support, you could use calc().

Basically, you want 50% of the viewport width (50vw) minus half of width of #container (so you're measuring from the center of your #container and you use half of all the values) - I'm assuming that you're OK with absolute positioning #lef to the viewport to keep it to the right?

CSS (fiddle here):

#lef {
  background-color:yellow;
  width:calc(50vw - 100px);
  height:20px;
  position:absolute;
  right:0;
  top:0;
}

Upvotes: 1

Andrea Turri
Andrea Turri

Reputation: 6500

This is the option that comes closed

http://jsfiddle.net/7QJQn/4/

I think that the best solution for doing something like this is just using javascript / jQuery.

Upvotes: 1

menislici
menislici

Reputation: 1167

First of all, you should wrap your markup in a wrapper div so elements stay tight. I made some changes, take a look:

 <div id="wrapper">

  <div id="lef">

  </div>


  <div id="container">

  </div>

</div>

​ And the css:

 html, body {
 height: 100%;
 width: 100%;

}

#wrapper{

width: 360px;

}

#container {
 width: 200px;
 margin-left: auto;
 margin-right: auto;
 height: 100px;
 background-color:red;
}
#lef {
background-color:yellow;
width: 160px;;
height:100px;
float: left;
}​

Example

Upvotes: 0

Razvan
Razvan

Reputation: 10093

Add this to your css:

#lef{
  float:left
}

And change the order of the divs in the html, like this: 

<div id="lef"></div>
<div id="container"></div>

Upvotes: 0

Related Questions