CODEWITHSUNDEEP
csshtml
Clem
Clem

Reputation: 11824

Div position - css

I'm trying to achieve, that the div's will behave like an example on picture, using css: page example

Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?

Edit: Page must not have scrollbar...so page's height is always max 100%, and no more...

thanks

Upvotes: 2

Views: 565

Answers (3)

Chris Frank
Chris Frank

Reputation: 4452

Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.

HTML:

<div id="header">

</div>
<div id="side">

</div>
<div id="content">

</div>

CSS:

#header {
    width:100%;
    height:50px;
}
#side {
    width:300px;
    height:100%;
    float:left;
}
#content {
    width:660px;
    height:100%;
    float:left;
}

jsFiddle

Upvotes: 0

Xilexio
Xilexio

Reputation: 1238

If you mean the two-column layout, you do it with pure CSS like this:

.container {
  background-color: #aaaaaa;
}

.left {
    float: left;
    width: 100px;
    clear: left;
}

.right {
    margin-left: 100px;
    background-color: #888888;
}

and HTML:

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

Live demo: jsFiddle

The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.

Upvotes: 0

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.

In the future you will have in css3 calc(): http://hacks.mozilla.org/2010/06/css3-calc/ This will solve your problem.

But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.

Check fiddle here

Upvotes: 1

Related Questions