PDA

View Full Version : DIV Flow Question



Varlamov
Jan 15th, 2011, 09:37 AM
Okay. Let's say I have two blocks of code, each a DIV.

I have it set to 500px from the top, for the first one, and 800 px from the top, for the second one.

How would I make it so, if I extended the top one, it pushes the bottom one down, instead of going behind it.

abduraooft
Jan 15th, 2011, 09:41 AM
How would I make it so, if I extended the top one, it pushes the bottom one down, instead of going behind it. Please post your complete code.

Varlamov
Jan 15th, 2011, 09:54 AM
.roundcont {
top: 400px;
position: absolute;
left: 500px;
width: 400px;
background-color: #ff9999;
color: #ffffff;
font-family: century gothic;
font-size: 10px;
text-align: center;
}
.roundcont2 {
top: 600px;
position: absolute;
left: 500px;
width: 400px;
background-color: #ff9999;
color: #ffffff;
font-family: century gothic;
font-size: 10px;
text-align: center;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(http://i1124.photobucket.com/albums/l578/liarspantonfire/tr.gif) no-repeat top right;
}

.roundbottom {
background: url(http://i1124.photobucket.com/albums/l578/liarspantonfire/br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

b{
color: #ffff00;
font-family: century gothic;
font-weight: normal;
font-family: century gothic;
size: 10px;
}

i{
color: #ffffff;
font-family: century gothic;
size: 10px;
}

u{
color: #044200;
font-family: century gothic;
size: 10px;
}

s{
color: #ff0000;
font-family: century gothic;
size: 10px;
}

a:link, a:visited, a:active {
text-decoration: underline;
text-transform: lowercase;
font-family: century gothic;
color: #000CB5;
size: 10px;
}

a:hover{
color: #000CB5;
letter-spacing: 1px;
text-decoration: line-through;
text-transform: lowercase;
font-family: century gothic;
size: 10px;
}

h1{
font-family: century gothic;
font-size: 10px;
color: #000000;
font-weight: normal;
text-align: left;
letter-spacing: 2px;
margin: 0px;
padding: 0px;
padding-top: 3px;
padding-bottom: 5px;
}

h2{
font-family: century gothic;
font-size: 10px;
font-weight: normal;
text-align: center;
text-decoration: underline;
padding: 0px;
margin: 0px;
color: #000074;
}

<h1>Header 1</h1>
<div class="roundcont">
<div class="roundtop"><img src="http://i1124.photobucket.com/albums/l578/liarspantonfire/tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /></div>
<center>
<h2>Date: January 14th, 2010</h2>
band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band.</center>
<div class="roundbottom"><img src="http://i1124.photobucket.com/albums/l578/liarspantonfire/bl.gif" alt="" width="15" height="15" class="corner" style="display: none" /></div>
</div>
<div class="roundcont2">
<div class="roundtop"><img src="http://i1124.photobucket.com/albums/l578/liarspantonfire/tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /></div>
<h2>Header 2</h2>
band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band. band.
<div class="roundbottom"><font color="#FF0000"><img src="http://i1124.photobucket.com/albums/l578/liarspantonfire/bl.gif" alt="" width="15" height="15" class="corner" style="display: none" /></font></div>
</div>

CSS and then HTML.

Excavator
Jan 15th, 2011, 10:03 AM
Hello Varlamov,
Don't use the absolute positioning. Those positioned elements are removed from the flow of the document and you want them to act on each other.
Postion those elements with margins instead.

See the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

Varlamov
Jan 15th, 2011, 10:15 AM
Okay, I fixed the positioning. (: Thanks.

Whoo! :D It worked! Thank you very much!