PDA

View Full Version : Basic css/html help needed +21 rep


Mr.Sam
18-06-2007, 07:53 PM
Hey :)
I started learning html and css today and have a question.
Currently i have three div's each expands when more text is added - However if i was to have one box above the other (Height wise)
could i make it so that when the top expands the bottom one moves down so that they are always the same distance eg 50px from each other?

I have no idea if the coding is good - i started today and previewing it it seems to work lol..
It's linked into a html document and i can supply that code if needed..

body {background: #ABABAB;
font-family: "comic sans ms",ariel, sans-serif;
color: black;}
h1 {color: #7A7A7A;
text-align: center;}
h2 {color: #7A7A7A;
text-align: center;}

div.col1 {width: 400px;
background: white;
font-size: 10pt;
padding: 10px;
border-style: solid;
border-size: 1px;
border-color: black;
position:absolute;
top: 100px;
left: 150px;}


div.col2 {width: 150px;
background: white;
font-size: 10pt;
padding: 10px;
border-style: solid;
border-size: 1px;
border-color: black;
position:absolute;
top: 100px;
left: 600px;}

div.col3 {width: 600px;
background: white;
font-size: 10pt;
padding: 10px;
border-style: solid;
border-size: 1px;
border-color: black;
position:absolute;
top: 36px;
left: 150px;}

body {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;}
Drompo
18-06-2007, 07:55 PM
I don't think you can do that unless you can with javascript but i doubt it.

Other than that give the div that expands over the other one a higher z-index number.
Mr.Sam
18-06-2007, 07:57 PM
Ok thanks :) +rep

I'll leave the thread open for others to reply.

I don't think you can do that unless you can with javascript but i doubt it.

Other than that give the div that expands over the other one a higher z-index number.
RYANNNNN
18-06-2007, 08:00 PM
Not 100% sure what your after, but .. margin-top: 50px;
Mr.Sam
18-06-2007, 08:03 PM
I'll explain in more detail.

Say i have Two content boxes above each other, they both expand downwards when more text is added. If i was to add text to the one above the lower one and it expands - is there a way i can make the lower box always stay the same distance from the top box, so when it expands they are both say 50px from each other.


Not 100% sure what your after, but .. margin-top: 50px;
Ini
18-06-2007, 08:03 PM
<div height="HEIGHT HERE"> your HTML here </div>

EDIT: Read your above post.

Yes you just do as i did above and put the same code underneath, the top one will expand but keep the bottom one the same distance away
Invent
18-06-2007, 08:04 PM
As long as you never coded it using absolute positioning, it should do it anyway.
L?KE
18-06-2007, 08:12 PM
Wait, are you asking that if you have two boxes, when more stuff was added in the top, the bottom one moves down when it expands?

Cos if you are, that's easy.

The (X)HTML:


DOCTYPE..
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="blah.css" />
</head>
<body>
<div class="boxcontainer"> <!-- This keeps the two boxs in a column -->
<div class="box1">
<p>You're text goes here. blah blah etc. Yes :)</p>
</div>

<!-- There isn't any more space left horizontally, so the 2nd box has to go below. -->

<div class="box2">
<p>You're text goes here. blah blah etc. Yes :)</p>
</div>
</div>
</body>
</html>




The CSS:


.boxcontainer {
width: 150px;
height: 100%;
padding: 5px 10px 5px 10px; /* We have 130px of sace in there ;P */
}
.box1 {
width: 130px; /* Could be 100% */
padding: 10px;
height: 100%;
margin-bottom: 50px;
}
.box2 {
width: 130px;
padding: 10px;
height: 100%;
margin: 0 0 0 0;
}

Want to hide these adverts? Register an account for free!