Home/ Questions/Q 181311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T14:44:28+00:00

I have this HTML code: <body> <div id=div0 style=display:inline; background-color:green; width:100%> <div id=div1 style=display:inline;

  • 0

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%'>&nbsp;</div>         <div id='div2' style='display:inline; background-color:red;width:33%'>&nbsp;</div>         <div id='div3' style='display:inline; background-color:yellow;width:33%'>&nbsp;</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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Taken from display declaration:

    display: inline means 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.

    • 0