CODEWITHSUNDEEP
htmlcss
Mahima
Mahima

Reputation: 509

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

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>

enter image description here

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?

Upvotes: 1

Views: 1938

Answers (2)

TimoSolo
TimoSolo

Reputation: 7325

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337570

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

Upvotes: 2

Related Questions