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

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Socket.connect doesn't throw exception in Android -

SPSS keyboard combination alters encoding -