header...">
Geek Answers Handbook

How to keep external div not popped inside padding / margin div?

Here's an jsfiddle example

Here's the html:

<div class="header">header</div> <div class="wrapper"> <div class="left"><div class="content"></div></div> <div class="right">right</div> </div>

Here's the css:

 .left{ position:absolute; width:30%; background:red; left:0; height:100%; display:block; padding:5px; } .right{ overflow:hidden; background:green; position:absolute; right:0; width:70%; height:100%; } html, body{ min-height:100%; height:100%; padding:0px; margin:0px; position:relative; } body {position:relative;} .wrapper { position:relative; height:100%; } .header{ width:100%; height:100px; background:yellow; display:none; } .left .content { background:blue; height:inherit; width:100%; }

You can see that the red div is pushed by the blue div. How can I prevent this? All width and height are based on%. The only way I know is to give the red div a fixed width. Do I have another way that this can be done with%?

+4
source share
3 answers

You want to use window size, see this updated example: http://jsfiddle.net/Lca5c/1/

Your CSS will look like this:

 .left{ position:absolute; width:30%; background:red; left:0; height:100%; display:block; padding:5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

The reason it was superseded is due to the addition added to the div. Make sure you check browser compatibility ( here ) to make sure it meets your requirements.

+5
source

I know this is an old post. The best solution is to add

 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;

on the item that is in your window.

You can do this using div, textarea, input, select or any other element in HTML.

+4
source

The easiest way is to remove the registration from .left and add an addition to .content, as well as remove the width from .content so that the automatic width is set by default.

Doing this will lead to the correct behavior that you want and will not rely on CSS3 sizing method.

In addition, you do not need to specify a DIV to display: block, as this is the default display property.

 .left{ position:absolute; width:30%; background:red; left:0; height:100%; } .left .content { background:blue; height:inherit; padding:5px; }
+1
source

More articles:


All Articles