开发者

How to prevent <divs> from moving downward

开发者 https://www.devze.com 2023-02-17 05:40 出处:网络
I am organizing a data page.All client informaiton like telephone, address is on the left side and then on the right side we have notes about them.The开发者_StackOverflow社区 thing is.The more paragra

I am organizing a data page. All client informaiton like telephone, address is on the left side and then on the right side we have notes about them. The开发者_StackOverflow社区 thing is. The more paragraphs added, the more the information on the left gets brought down. What can i do so that the left side info panel stays the same regardless of how much data is being shown on the right.

below is some code:

<div id="name">
    Andrew Smith
</div>

<div id="otherinfo">
    Paid.  
</div>

<div id="itemheading">
    About Client
</div>
<div id="itemholder1">
    Here is the client informaiton.  This is where the more info you 
    have the more the left side panel will be brought down. 
</div>


<div id="itemheading">
    Address
</div>
<div id="itemholder">
    2000 sample st
    <br>
    san fran, ca
    <br>

CSS:

#name {
    padding-top:10px;
    margin-left:35px;
    font-weight:bold;
    font-size:22px;
}

#otherinfo {
    margin-left: 35px;
    margin-top: 2px;
}

#itemheading {
    margin-top:10px;
    margin-left:35px;
    font-weight:bold;
    font-size:16px;
}

#itemholder1 {
    margin-left: 35px;
    margin-right: 200px;
    margin-top:5px;
}

#itemheading {
    margin-top:10px;
    margin-left:35px;
    font-weight:bold;
    font-size:16px;
}

#itemholder {
    margin-left: 35px;
}


You have two columns, one on the left, the other on the right. As I understand it, you want to add information to the right-hand column, without this causing information in the left hand column to display below it.

At the moment you are interleaving divs that go on the left and ones that go one the right; instead you should just have two divs, one for all the left-hand stuff and the other for all the right-hand stuff:

<div id='left'>
all the stuff that goes in the left-hand column,
name, 
address, 
etc
</div>

<div id='right'>
everything that goes in the right-hand column
</div>

And then use appropriate CSS to display them.

0

精彩评论

暂无评论...
验证码 换一张
取 消