Menu
I have this HTML code:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2 and div3 but they don't fill the entire width.
What it's happening?
944
Users can see all div elements displaying inline. Approach 3: In this approach, we will apply the float: left property to all the div elements to display them inline.
Three or more different div can be put side-by-side using CSS. 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.
The display:inline-flex does not make flex items display inline. It makes the flex container display inline. The main difference between display: flex and display: inline-flex is that display: inline-flex will make the flex container an inline element while its content maintains its flexbox properties.
You can use display: inline to put the two div elements inline. Explanation: div elements are block elements, so their display style is usually display: block . You can wrap both the div elements in a span tag. Explanation: span works the same way as the div , to organize and group elements.
Taken from display declaration:
display: inlinemeans that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
See answer from Phunky for further comments on floating.
143
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
