Menu
I have two divs, the first doesn't have much content and the second has a lot of content. I want them to float side-by-side such that the first div is only as wide as the text and the second div fills the remaining amount of horizontal space. And, I don't want to specify fixed widths.
Here is the desired appearance using tables: http://jsfiddle.net/enRkR/
Can this easily be done with CSS floats, or is a table layout the only way to achieve this look?
639
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
Yes, you can do it with css & it's work in all browsers. Do like this:
.right{
overflow:hidden;
background:red;
}
.left{
float:left;
background:green;
}
Check this live example http://jsfiddle.net/enRkR/8/
142
<div style="float:left">less content</div>
<div>More content More content
</div>
Try this :
<div>
<div id="div1" style="float:left">
content
</div>
<div id="div2" >
content
</div>
<div>
Or
refer this : How to style Div elements as Tables
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><title>table using divs</title>
<style type="text/css">
.div-table{display:table; border:1px solid #003399;}
.div-table-caption{display:table-caption; background:#009999;}
.div-table-row{display:table-row;}
.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}
</style>
</head>
<body>
<div class="div-table">
<div class="div-table-caption">This is a caption</div>
<div class="div-table-row">
<div class="div-table-col">1st Column</div>
<div class="div-table-col">2nd Column</div>
</div>
</div>
</body>
</html>
Note : To use these CSS property values, you need to have a web browser which supports them. Unfortunately, that translates to a limited number of web browsers such as IE 8, Firefox 3, Opera 9 and so on
21
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
