CODEWITHSUNDEEP
htmlcss
user2481398
user2481398

Reputation:

Make Div into new Line

I have three div's

<div id="example"></div>
<div id="gallery"></div> 
<br/>                   
<div id="autoshootmsg" style="display: none;">          
   <span id="timer"></span>
   <span> seconds remaining</span>
</div>

I want this to be like the image below:

enter image description here

How will I do that through css? Below is my css code:

div#gallery
{
    margin-right: 10px;
}

div#example,
div#gallery
{    
    border: 2px;
    border-style: solid;
    border-color: black; 
    margin-left: 10px; 
}
div#example,
div#gallery
{
    width: 320px;
    height: 240px;
    display: inline-block; 
}

Upvotes: 0

Views: 65

Answers (4)

abhilash lohar
abhilash lohar

Reputation: 1

As i understand your question, following code will help you

<div id="example" style="border:solid 1px;float:left;width:49.5%;" >1</div>
<div id="gallery" style="border:solid 1px;float:left;width:49.5%;">2</div>
<br/>              
<div id="autoshootmsg" style="border:solid 1px;width:99%;"><span id="timer"></span> <span> seconds remaining</span></div>

Demo-http://jsfiddle.net/jsq2dcLa/

Thank you

Upvotes: 0

Gasim
Gasim

Reputation: 8001

If you set the width correctly, it will work:

*, *::before, *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#example, #gallery, #autoshootmsg {
    display: inline-block;
    border: 1px solid black;
    padding: 5px;
    height: 50px;
}

#example, #gallery {
    width: 50%;
}

#autoshootmsg {
    width: 100%;
}

The border-box model allows you to have the borders and padding as a part of width and height. This means that border and padding do not take extra space.

EDIT: Here is a preview. You have to get rid of the space between inline block attributes. That's why I used the HTML comments "hack" on that.

Upvotes: 1

jalal mohammadzadeh
jalal mohammadzadeh

Reputation: 19

you have to use of this code for your box.

<div id="allwrapper">
  <div class="top">
    <section class="t-left"></section>
    <section class="t-right"></section>
  </div>
  <div class="down">
     <section class="d-box"></section>
  </div>
</div>

Upvotes: 0

Thijs Riezebeek
Thijs Riezebeek

Reputation: 1812

Simply set the autoshootmsg div to display:inline-block as well and make it wider.

div#autoshootmsg
{
    width: 640px; // Twice the width
    height: 240px;
    display: inline-block; 
}

Upvotes: 0

Related Questions