Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.
Hi all, please see this major site announcement: https://www.boards.ie/discussion/2058427594/boards-ie-2026

CSS & Divs Problem

  • 15-03-2007 02:33PM
    #1
    Ziycon
    Registered Users, Registered Users 2 Posts: 1,991 ✭✭✭


    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

  • #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


  • #3
    Ziycon
    Registered Users, Registered Users 2 Posts: 1,991 ✭✭✭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!


  • #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