html - Only third div column not positioning properly? -


i have 3 columns on page, left, middle , right. left , middle ones positionnig fine across browsers. far right 1 not position properly, if give same margin-top:30px (just other divs have) goes way down screen?

thanks suggestions

css:

    #firstcolumn {     position:relative;     margin-left:20px;     width:200px;     margin-top:30px;     float:left;  }  #secondcolumn {     position:relative;     margin-left:315px;     width:200px;     margin-top:30px;     float:none;  }  #thirdcolumn {     position:relative;     margin-left:650px;     width:200px;     margin-top:-30px;     float:none;  } 

html:

<div id="firstcolumn"> <p style="font-size:18px; color:gray;"><b>lorem ipsum</b></p> <hr style="background-color:gray; border:0.5px solid gray" /> <p style="color:blue; font-size:14px;">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>  <div id="secondcolumn" > <p style="font-size:18px; color:gray;"><b>lorem ipsum</b></p> <hr style="background-color:gray; border:0.5px solid gray" /> <p style="color:blue; font-size:14px;">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>  <div id="thirdcolumn" > <p style="font-size:18px; color:gray;"><b>lorem ipsum</b></p> <hr style="background-color:gray; border:0.5px solid gray" /> <p style="color:blue; font-size:14px;">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> 

spot mistake: margin-top:-30px; @ #thirdcolumn in css.

edit: use position:absolute;

edit #2:

#firstcolumn {     position:absolute;     margin-left:20px;     width:200px;     margin-top:30px;     float:left; }  #secondcolumn {     position:absolute;     margin-left:315px;     width:200px;     margin-top:30px;     float:none; }  #thirdcolumn {     position:absolute;     margin-left:650px;     width:200px;     margin-top:30px;     float:none; }  <div id="firstcolumn"></div> <div id="secondcolumn" ></div> <div id="thirdcolumn" ></div> 

Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -