Change layout of page using css only (without changing DOM placement) - html

Question

I have a structure which cannot be changed due to some reasons.Here is the structure:
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width: 200px; height: 200px; background: #f1f1f1">container</div>
I want to get this particular layout using CSS only, ie. no positions, negative margins etc. The HTML elements will remain in same flow - h1, p and div. Is it possible to do this?

Answer 1

This should work for you. The main thing is to put float: left on the left hand div.
<style type="text/css">
#wrapper {
width: 90%;
}
#container {
float: left;
width: 200px;
height: 150px;
background-color: #666;
margin: 0 10px 10px 0;
}
H1 {
font: bold 2em arial;
}
P {
background-color: #ccc;
}
</style>
<div id="wrapper">
<div id="container">#container</div>
<h1>Heading</h1>
<p>
Some text.
</p>
</div>
Example fiddle

Answer 2

Of course you can do that in CSS only! :)
I know this is an old question, but its a fun challenge. The trick is to create a pseudo element before the h1 that floats left to create the space for the container div.
I'm sure there are many other ways to do this...
div {
position:absolute;
top:0;
}
h1::before {
content:'';
float:left;
width:200px;
height:200px;
margin-left:20px;
}
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width:200px; height:200px; background:#f1f1f1">container</div>