Border?? divs inside body.

[jasemilly]

I have been watching this tutorial Borders.

I have this working per the example, but when I include div tags instead of p tags inside the body ie

the left and right borders disappear??? different div layout makes no difference. Is their something about divs that would stop this from working??

thanks

[aspiringWebbie]

Keep in mind that divs are block level elements and p tags are inline. When adding borders to a div – you have to account for this space (i/e: a 1px border on the left and right side of the div equates to 2px). If this is not accounted for it can change your layout.

It’s much easier to see the issue with your code. If you can supply this it will be easier to get an idea of what is occurring.

[Senff]

@aspiringWebbie P tags are block level elements by default, actually.

[aspiringWebbie]

Thanks Senf – I know I actually came back on to edit my post. Still learning the coding curve…

[jasemilly]

I am, not really creating a page as such was just following the borders tutorial p tags ind]side the body worked great but the moment I included any kind of div I lost the left and right border. This way of creating borders is perfect for a webpage I will be working on, but it will include div’s. Is their a way to get this method to work? Or is it down to the difference between inline and block elements?

thanks

[jasemilly1]

here is the css and html i have been messing around with.

don’t understand why the left and right borders dont show??

css

/*border*/

*{margin:0; padding:0;}



body:before, body:after {

content: "";

position: fixed;

background: #900;

left: 0;

right: 0;

height: 10px;

}

body:before {

top: 0;

}

body:after {

bottom: 0;

}

body {

border-left: 10px solid #900;

border-right: 10px solid #900;

}



/*end of border */

#jm{

width:80%;

height:80%;

background-color: orange;

position: fixed;

top: 6%;

left: 5%;

}



#container

{



/*background-image: url(images/graphics/background.jpg);*/

width: 90%;

height: 90%;

position: absolute;



background-color: purple;

top: 11px;

left:20px;

}





#floorplan{



top: 0%;

background-image: url(images/graphics/floorplan.gif);



width: 80%;

height: 100%;

left: 15%;

background-repeat: no-repeat;

background-position: right top;





position: absolute;



/* background-color: lime;*/

}



#control{

position: absolute;

top:0%;

left:0%;

width:4%;

height:80%;

background-color: teal;

padding-left: 4%;

padding-top: 1%;

}



#cq {position: relative;

top:20%;

left:20%;

width:10%;

height:10%;

background-color:green;

padding-left: 4%;

padding-top: 1%;}

/*.off{background-image:url(images/icons/lightbulboff.png);}*/

/* this section is all the bulbs a1 is the group and _1 is the indvidual bulb */



/* a1 is the table lights*/

#a1_1{width: 2%;

height: 2%;

top: 0%;

left: 20%;

position: absolute;

background-repeat: no-repeat;

background-color: blue ;



}

#myBulb{

width: 2%;

height: 2%;

top: 0%;

left: 20%;

position: absolute;

background-repeat: no-repeat;

z-index: 1;

}

#a1_2{width: 2%;

height: 2%;

top: 10%;

left: 30%;

position: absolute;

background-repeat: no-repeat;

background-color: blue ;



}

html

 egetgegegetgegetggt

thanks for any thoughts

[Author]

Posts