Scribd
Upload
13 views2 pages

The Inline

The document discusses using the inline-block value of the display property to create a grid of boxes that fills the browser width and wraps nicely when resized, providing an easier alternative to using floats. Inline-block elements can have a width and height like block elements, but display inline like text. Examples show how setting elements to display: inline-block avoids the need for clear fixes required when using floats.

Uploaded by

Nenad Femic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views2 pages

The Inline

The document discusses using the inline-block value of the display property to create a grid of boxes that fills the browser width and wraps nicely when resized, providing an easier alternative to using floats. Inline-block elements can have a width and height like block elements, but display inline like text. Examples show how setting elements to display: inline-block avoids the need for clear fixes required when using floats.

Uploaded by

Nenad Femic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

The inline-block Value

It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the
browser is resized), by using the float property.

However, the inline-block value of the display property makes this even easier.

inline-block elements are like inline elements but they can have a width and a height.

Examples

The old way - using float (notice that we also need to specify a clear property for the element after the floating
boxes):

<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}

.after-box {
clear: left;
border: 3px solid red;
}
</style>
</head>
<body>

<h2>The Old Way - using float</h2>


<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div></body></html>

1
The same effect can be achieved by using the inline-block value of the display property (notice that no clear
property is needed):

<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}

.after-box {
border: 3px solid red;
}
</style>
</head>
<body>

<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>


<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

</body>
</html>

You might also like