CODEWITHSUNDEEP
csshtmlcss-float
acr
acr

Reputation: 1746

Align HTML DIV section properly using CSS

I am working on a webpage where I am trying to arrange 4 div areas.

  1. input - user can enter data here in a form
  2. output - output will be displayed here (echoing from php)
  3. sumbit - contains a submit button that can be used to submit the form data
  4. save - this section contains a save button which can be used to save\email the output section data

I am using below code to to create html:

<div class="input">

        INPUT
</div>

<div class="output">

             OUPUT
</div>

<div class="submit">

          SUBMIT
</div>              

<div class="save">

SAVE

</div>

and the css code:

.input{

width:45%;
float:left;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
     margin-bottom:10px;

}

.output{

width:45%;
float:right;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
    margin-bottom:10px;

}


.submit{
width:45%;
float:left;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;
     margin-bottom:10px;

}

.save{

width:45%;
float:right;
border-width:1px;
border-style:solid;
border-color:#ddd;
padding:10px;

 margin-bottom:10px;

}

If all div sections have data, they are aligning properly.But here, since output div area getting data from a php script(echo the value), initially there will not be anything to display here.Due to that divs are not aligning properly. the sumbit div will occupy output div area.

How can i fix it ? I need to stick submit div eventhough there is no data in output.

I have setup a fiddle here. LINK if you try removing the OUPUT from output div section, you will see the issue

Upvotes: 0

Views: 686

Answers (3)

spfuller
spfuller

Reputation: 178

If you still want to show the border on the output div without showing any data you can just put a &nbsp; inside the div using the content property

.output:before{
    content:"\00a0";
}

Upvotes: 0

Ankit Aggarwal
Ankit Aggarwal

Reputation: 370

Pass min-height:20px;` overflow:hidden; in .output class . infact can pass this property to every class.

Upvotes: 0

mshsayem
mshsayem

Reputation: 18008

If you want to show .submit always below .input, use clear:both on .submit.

Fiddle: http://jsfiddle.net/Qpc6F/1/

(by the way, I have used display:none on .output to have the effect of empty content. Remove it in your code.)

Upvotes: 3

Related Questions