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>
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.
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 .
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.
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%).
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.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With