Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS & Divs Problem

Options
  • 15-03-2007 3:33pm
    #1
    Ziycon
    Registered Users Posts: 1,987 ✭✭✭


    Im trying to get on div to go on the far left and the other on the far right of a page both starting under a banner, but the right div always shows up under the left one on the far left of the screen!??

    Anyone??


Comments

  • Options
    #2
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell


    I'm assuming you know a little CSS and that you know things like how big the banner is and how wide the two divs are. 
    <img src="art/banner.jpg width="500" height="100" style="position:absolute;top:0px;" />
<div id="left-div" name="left-div" style="postion:absolute;top:101px;left:0px;">This is the left div</div>
<div id="right-div" name="right-div" style="postion:absolute;top:101px;left:500px;">This is the left div</div>

    However there are other ways: 
    <img src="art/banner.jpg" width="500" height="100" align="center" />
	<div id="left-div" style="position:relative;float:left;align:left;width:100px;background-color:red;">Left </div><div id="rightt-div" style="position:relative;float:right;align:right;width:100px;background-color:green;">Right</div>

    Or if it comes down to it you could use tables to position the data the way you want (I know it's frowned on but it works dammit :)) 
    <table width="100%" align="center">
<tr>
      <td colspan="3" align="center"><img src="art/banner.jpg" width="500" height="100" align="center" />
      </td>
</tr>
<tr>
      <td width="100" align="left" style="background-color:red;">Left</td>
      <td width="100" align="center">&nbsp;</td>
      <td width="100" align="right" style="background-color:green;">Right</td>
</tr>
</table>

    Hope that helps
    -RD


  • Options
    #3
    Ziycon
    Registered Users Posts: 1,987 ✭✭✭Ziycon


    Im redesigning the whole site to get rid of tables! I figured out the problem, im using float now and its working fine!
    Thanks for the help!


  • Options
    #4
    gamblingIRE
    Closed Accounts Posts: 67 ✭✭gamblingIRE


    yep floats are the key..

    I found today that floating stuff opens up new pains in the ass if you are using javascript for things like 3 column layout height hacking :-s

    I find a webmaster plugin to identify elements, divs etc visually can help (or for in diagnosing problems like this (or setting the divs a red 1px border in css)


Advertisement