Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS side by side div with Pixel and Percent widths

I have two div's (side by side) inside a parent div, i want right div to occupy 100% of remaining space (i.e. 100% - 200px) and should always stay next to left div (not below left div):

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>
like image 880
Faizal Balsania Avatar asked Mar 17 '11 07:03

Faizal Balsania


People also ask

Is it better to use percentage or PX in CSS?

The px belongs to the absolute category of length units whereas the em and %(percentage) refers to the relative class of sizing units. The value of px is fixed over the HTML document but the em and %(percentage) depends on the unit used by the parent element.

Can the width and height CSS properties accept percentage values?

The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size .

Why is my div width 100%?

div is block element. Block elements are 100% width of parent element, if width is not specified. Show activity on this post. it's taking up all the available space based on it's parent container, exactly what it's supposed to do.

How do I change the width of a percentage in HTML?

Try It: Set the width of an image using a percentage and resize your browser window. For the width attribute, you can also use percentages, where 100% is the total space available. So, if you wanted an image to be one quarter the width of the window, you could set width to 25% (one quarter of 100% is 25%).


1 Answers

Since you have only one fixed width column, float it left and that is it. As for the second column, do not specify float and width; this makes sure it is 100% wide. But you must add a left margin; otherwise the second column will interfere with the floated column e.g.

  • aqua background will appear behind blue background (turn off the blue background to see what I mean)
  • if second column becomes taller than first one, additional content will start appearing below the first column.

<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>
like image 139
Salman A Avatar answered Oct 13 '22 07:10

Salman A