Geek asks and answers

Display two sections in one row fill space - CSS

I have two divs divaand divb. They have a fixed height 30px. I want to display them in one line one by one. This can be done by specifying the width 10%and, 90%respectively, and float: left. It works great. But I gave them the border 1 px, and this violates the calculation. I gave the second div a width 88%and it works. But after that div there is empty space.

I want both divs to appear on the same line. The dimensions of the page are changing, and I want the divs to fill in the blank so that I cannot give them a fixed width. The first div can be given a fixed width, because I just want it to be 150 pxwide. But the second div must be wider to fill the gap.

What I get is:

Current layout

and I want this:

Expected layout

Here is the violin.

+3
source share
6 answers

Add to the body width: 100%and point float: left;to div1 and delete float: left;to div2.

If you are using percentage widths or heights for children, you need to specify the percentage width or height in the parent or, rather, in the container.

That should fix it! :)

Look at this fiddle here

Good luck

+9

 body{
     margin: 0;
 }
 #div1{
     height: 30px;
     width: 10%;
     outline: solid 1px #000000;
     background-color: #0066CC;
     float: left;
 }
 #div2{
     height: 30px;
     width: 90%;
     outline: solid 1px #000000;
     background-color: #66CC00;
     float: left;
 }​

IE,

+3

http://jsfiddle.net/J7mJX/1/

#div1, #div2 {
    -webkit-box-sizing: border-box;  
    -moz-box-sizing: border-box;  
    box-sizing: border-box;   
}

therefore, the boundary is included in the width calculation.

+3
source

Set window size: border-box; on floating divs with% width.

https://developer.mozilla.org/En/CSS/Box-sizing

+2
source

Alternatively, you can add additional divs that will not affect the width of the parent div with the added border

http://jsfiddle.net/ollie/76Raj/9/

0
source 

<div style="display:table">
    <div style="display: inline-block;width:100px;height:100px;background-color:red;">DIV 1</div>
    <div style="display: inline-block;width:100px;height:100px;background-color:green;">DIV 2</div>
    <div style="display: inline-block;width:100px;height:100px;background-color:blue;">DIV 3</div>
</div>
Run codeHide result
0
source

More articles:


All Articles