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..

Code:

    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.

Originally Posted by Reina

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.

Originally Posted by RYANNNNN

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:

HTML Code:

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:

Code:

.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;
    }

Thread: Basic css/html help needed +21 rep

Thread Tools

Basic css/html help needed +21 rep

Posting Permissions