Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting div width to 100% minus certain amount of px

Tags:

html

css

width

Have been searching the net for the past hours to find a solution to this, but couldn't find it, so here I am.

I need the width of the div to be 100% minus the width of the left div.

So that the div to the left of it stays the same width (390px) but the other div adjusts its size depending on the resolution . I have found the solution where it has a fixed width div on both sides, but just cant figure this out.

enter image description here

like image 460
Jay Mcquire Avatar asked Jul 06 '11 18:07

Jay Mcquire


People also ask

How do I change the width to 100% in CSS?

It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.

How do you make a div 100 width?

What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.

Is a div 100% width by default?

auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.


1 Answers

Simple solution:

<div id="content">
    <div class="padder">

    </div><!-- .padder -->
</div>
<div id="sidebar">
    <div class="padder">

    </div><!-- .padder -->
</div>

CSS:

div#content {
    float: right;
    width: 100%;
}

div#content .padder {
    margin-left: 330px;
    padding: 0 30px 0 0;
}

div#sidebar {
    float: left;
    width: 300px;
    margin-top: -30px;
    padding-left: 30px;
    margin-right: -330px;
}

This will allow you to have a fixed sidebar width and a full width content area. I have used it many times and it works like a charm.

like image 157
brenjt Avatar answered Oct 15 '22 05:10

brenjt