Menu
Referring the following HTML, there are four DIV containers each containing an image, heading-element, paragraph-element, and a link. When the page opens on a full sized computer display, I want the three divs to align side by side across the screen.
So far they are just stacking vertically down the screen.
<div class="threeSpread">
<div class="outer">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
<div class="inner">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
<div class="outer">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
</div>
CSS
div {
display: block;
}
.threeSpread {
margin: 0 40px 40px 40px;
}
div.inner, div.outer {
max-width: 30%;
}
@media (max-width: 568px) {
.outer img {
float: left;
margin-right: 5px;
}
.inner img {
float: right;
margin-right: 5px;
}
h2 {
margin-top: 50px
}
}
577
Make display:inline-block;
div {
display: inline-block;
}
Working example: http://codepen.io/anon/pen/GZrNQe
Or else,
div {
display: inline-block;
}
.threeSpread {
margin: 0 40px 40px 40px
}
div.inner, div.outer {
max-width: 30%;
}
@media (max-width: 568px) {
.outer img { float: left;
margin-right: 5px;}
.inner img (float: right;
margin-right: 5px;
)
h2 {margin-top: 50px}
} <html>
<head>
<link rel="stylesheet" href="new.css" type="text/css" charset="utf-8">
</head>
<body>
<div class="threeSpread">
<div class="outer">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
<div class="inner">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
<div class="outer">
<img src="imagesForNew/new1.jpg">
<h2>CHININESE INVESTORS COME TO DETROIT</h2>
<p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
<a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
</div>
</div>
</body>According to learnlayout.com,
You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using
float, but now withinline-blockit's even easier.inline-blockelements are like inline elements but they can have awidthandheight.
124
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
