When styling divs inline, they will automatically wrap to the next line if they don't fit in the viewing window. This is often used for creating a quick and simple mobile version of a website.
I am interested in achieving this effect with both sides simultaneously. To better understand what I mean, please refer to the jsfiddle link provided below. Is it possible to accomplish this using CSS alone, or is CSS not powerful enough for this task?
Please see the code snippet below:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
float:none;
border: 1px solid blue;
background-color: yellow;
}
.b {
display: inline-block;
width: 200px;
height: 100px;
padding: 5px;
float:none;
border: 1px solid blue;
background-color: yellow;
}
.c {
display: inline-block;
width: 100px;
height: 100px;
float:right;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<div> <div class="a">should end up below on left</div> <div class="b">center div should end up on top</div> <div class="c">should end up below on right</div></div>
</body>
</html>