CODEWITHSUNDEEP
htmlcss
Luuk Krijnen
Luuk Krijnen

Reputation: 1192

CSS positioning 2 shifted columns

first of all is there a good tutorial about positioning elements which really explains what's going on? I've read multiple but can't get a grip on it.

the specific problem I have is as follows:

I have a header div-element (in red) with underneath 2 columns(white and green). Normally with float:left; i can position the elements next to each-other. But now I want one (the white one) to move a bit over the header als shown.

with relative positioning with a negative top value I can get the white one at the right position but how to position the second column. When adjusting the browser size it al gets messed up.

#Column1
{
  float: left;
  position: relative;
  top: -140px;
  background-color: #FFFFFF;
  left: 70px;
  width: 280px;
  min-height: 500px;
  padding: 10px;
}

#Column2
{
  float: left;   
  width: 800px;
  background-color: #00FF00;
}

DIV positions graphically explained

Upvotes: 1

Views: 486

Answers (4)

Split Your Infinity
Split Your Infinity

Reputation: 4229

Here is JSFiddle that demonstrates your layout without floats using position absolute. In my experience position absolute is more flexible and made for this kind of layouts, especially when you want to dock elements using top, right, bottom and left. There are circumstance where you need to fallback on using floats, but in this case it is not needed.

Use floats to float things around it and position absolute to dock things.

The HTML

<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>

The CSS

#Header {
  background-color: red;
  height: 200px;
}
#Column1 {
  position: relative;
  background-color: #FFFFFF;
  top: -140px; left: 70px;
  width: 280px;
  min-height: 500px;
}
#Column2 {
  position: absolute;   
  background-color: #00FF00;
  left: 350px; top: 200px; right: 0;
  min-height: 360px;
}​

Update Remove display:none from the .more class in the JSFiddle and see that the containers are flexible as well.

Upvotes: 1

Wex
Wex

Reputation: 15695

This is kind of a complex request, so don't feel bad that you weren't able to figure it out. You shouldn't have to set the width of anything other than your sidebar for this solution; my solution relies on an uncommon use of overflow: hidden to achieve this.

http://jsfiddle.net/Wexcode/uBQEu/

HTML:

<div id="header"></div>
<div id="white"></div>
<div id="green"></div>

CSS:

#header { 
    background: red;
    height: 70px;
    border: 1px solid #000; }
#white {
    background: #fff;
    float: left;
    margin: -30px 0 0 70px;
    width: 100px;
    height: 230px;
    border: 1px solid #000; }
#green { 
    background: green;
    overflow: hidden; 
    height: 201px;
    border: 1px solid #000;
    border-top: 0;
    border-left: 0; }

Upvotes: 0

Andy
Andy

Reputation: 14575

You could just use a minus margin

http://jsfiddle.net/gAKAK/

Upvotes: 1

wanovak
wanovak

Reputation: 6127

I'm just gonna spitball here:

HTML

<div id="red"></div>
<div id="white"></div>
<div id="green"></div>

CSS

#red {
    width: 100%;
    float: left;
    height: 100px;
    position: relative;
    background-color: #f00;
}
#white {
    width: 20%;
    float: left;
    margin-left: 4%;
    margin-top: -40px;
    position: relative;
    background-color: #fff;
    height: 400px;
}
#green {
    width: 76%;
    float: left;
    position: relative;
    background-color: #0f0;
    height: 400px;
}

Does it work?

Upvotes: 1

Related Questions