CODEWITHSUNDEEP
csshtml
user3188826
user3188826

Reputation: 53

Placing other elements below the two div elements which were placed side-by-side

the code i have tried is CSS Code

#tools
{
    float:left;
}
#sketch 
{
    border: 10px solid grey;
    float:left;
    width: 700px;
    height: 500px;
    position: relative;
}

HTML code:

<div id="tools">
    <p>These are my tools</p>
</div>
<div id="sketch">
    <p>This is my sketch</p>
</div>
<button type="button">Click</button>

I am placing the two divs side-by-side the button is geting displyed side to the divs but I want the button below the div

Fiddle here

Upvotes: 0

Views: 44

Answers (4)

Janak
Janak

Reputation: 5052

You can use any of the two :

1) button { clear : both; }

2) Add a class clearfix to the Div - "sketch" that adds a pseudo element to the DOM after it to clear the float added.

  <div id="sketch" class="clearfix">
          <p>This is my sketch</p>
   </div>
  .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
   }

Upvotes: 0

alexeyf
alexeyf

Reputation: 1

Try to use "clear: left;" for the button to cancel the "float: left" of the previous div element.

See http://www.w3schools.com/cssref/pr_class_clear.asp for more details.

Upvotes: 0

brutusmaximus86
brutusmaximus86

Reputation: 264

Add wrapper with a clearfix:

<div class="wrapper cf">
<div id="tools">
<p>These are my tools</p>
</div>
<div id="sketch">
<p>This is my sketch</p>
</div>
</div>
<button type="button" >Click</button>

http://jsfiddle.net/brutusmaximus/5KmK6/3/

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

Clear the float:

button { clear: both; }

Upvotes: 1

Related Questions