#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    13
    Rep Power
    0

    Unhappy CSS columns side by side?


    Hi all

    I'm new to CSS (as of today) and I've decided to try a page layout using only CSS DIVs etc.

    My problem is I cannot for the life of me get two DIVs to render beside each other like columns.

    Here's my CSS code

    Code:
    <style type="text/css">
    #main {
    	float: left;
    	position: absolute;
    	padding-top: 10%;
    	padding-left: 10%;
    	}
    #cell {
    	width: 200px;
    	border: 1px solid black;
    	}
    #rand {
    	width: 200px;
    	border-left: 1px solid black;
    	border-top: hidden;
    	border-bottom: hidden;
    	border-right: 1px solid black;
    	}
    #content {
    	width: 200px;
    	border-top: hidden;
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 5px;
    	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: white;
    	cursor: default;
    	background: black;
    	}
    #contentRollOver {
    	width: 200px;
    	border-top: hidden;
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 5px;
    	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: black;
    	cursor: default;
    	background: white;
    	}
    #spacer {
    	padding: 5px;
    	width: 200px;
    	height: 19px;
    	border: hidden;
    	}
    #spacerWhite {
    	padding: 5px;
    	width: 200px;
    	height: 19px;
    	border-top: hidden;
    	border-bottom: hidden;
    	border-right: 1px solid black;
    	border-left: 1px solid black;
    	background: white;
    	}
    </style>
    and here's the code in my HTML:

    Code:
    <div id="main">
    	<div id="cell"><img src="images/title.gif" name="title" id="title" onMouseOver="MM_swapImage('title','','images/titleinv.gif',1)" onMouseOut="MM_swapImgRestore()"></div>
    	<div id="rand"><img src="images/rand1.png"></div>
    	<div id="content" align="justify" onMouseOver="this.id='contentRollOver';" onMouseOut="this.id='content';">Hello<br><br>This is where I post my photos, and other assorted tat you may find interesting.<br><br>Thankyou for looking.<br><br>- Laurence</div>
    	<div id="spacerWhite" align="center"><a href="mailto:blah@hotmail.com"><img src="images/mail2.gif" border="0"></a></div>
    	<div id="cell"><a href="flash.html" target="_blank"><img src="images/oldFlashPage1.gif" name="oldFlash" width="198" height="36" border="0" id="oldFlash" onMouseOver="MM_swapImage('oldFlash','','images/oldFlashPage.gif',1)" onMouseOut="MM_swapImgRestore()"></a></div>
    	<div id="spacer"></div>
      <div id="photos"><div id="content" align="center"><img src="images/photosTitle.gif"></div>
    	<div id="contentRollOver">Here are some of the photos I've taken since around summer of 2002.  I use the fully manual Praktica L SLR and Olympus D950Z digital cameras primarily, and also sometimes a ****ty APS camera I got for christmas a few years ago.  I scan film photos using an Epson Perfection 1200SCSI, and touch them up when required with Photoshop, then optimise and frame them with Fireworks.</div>
    	<div id="content" align="justify">Photo 1</div>
      </div>
    	
    	
    </div>
    the two DIVs i want side by side are 'main' and 'photos'. You'll notice I haven't defined photos in the CSS stylesheet; I had originally but because it screwed up so badly I just deleted it and now have one DIV over the other.

    Please help me get them side by side! Any help appreciated.

    -Laurence
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    #photos {float: left;}

    As long as there is room, they will sit side by side, aligned at the top.

    cheers,

    gary
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    13
    Rep Power
    0
    Thanks for your reply, but I'm afraid it doesn't work.

    Here's my updated CSS:

    Code:
    <style type="text/css">
    #main {
    	float: left;
    	position: absolute;
    	padding-top: 10%;
    	padding-left: 10%;
    	width: 210px;
    	}
    #cell {
    	width: 200px;
    	border: 1px solid black;
    	}
    #rand {
    	width: 200px;
    	border-left: 1px solid black;
    	border-top: hidden;
    	border-bottom: hidden;
    	border-right: 1px solid black;
    	}
    #content {
    	width: 200px;
    	border-top: hidden;
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 5px;
    	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: white;
    	cursor: default;
    	background: black;
    	}
    #contentRollOver {
    	width: 200px;
    	border-top: hidden;
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 5px;
    	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: black;
    	cursor: default;
    	background: white;
    	}
    #spacer {
    	padding: 5px;
    	width: 200px;
    	height: 19px;
    	border: hidden;
    	}
    #spacerWhite {
    	padding: 5px;
    	width: 200px;
    	height: 19px;
    	border-top: hidden;
    	border-bottom: hidden;
    	border-right: 1px solid black;
    	border-left: 1px solid black;
    	background: white;
    	}
    #photos {
    float: left;
    width: 210px;
    }
    I thought perhaps #main was filling the width of the page and so forcing #photos below it so I constrained it by making it 210px, but this didn't help.

    Any suggestions?
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    take photos out of the main div,
    and keep the float left,
    you probably should get it to work,

    btw, you ought to clean up that code
    remember that id's are unique can only be assign to one element in the document,
    http://www.w3.org/TR/html401/struct/global.html#adef-id
    Last edited by Akh; August 6th, 2003 at 05:51 PM.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    by default, a DIV is a block level element. this means it gets rendered on it's own line; everything else is forced to the next line.

    you can get around this by forcing the browser to render your DIV as an inline element
    Code:
    <div style="display: inline">col1</div><div style="display: inline">col2</div>
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    13
    Rep Power
    0
    Thanks for your replies. I managed to get it to work with trial and error insertion of the various styles.

    Code:
    #main {
    	float: left; 
    	position: relative;
    	padding-top: 30px;
    	padding-left: 30px;
    	}
    #cell {
    	width: 200px;
    	border: 1px solid black;
    	}
    #imageCell {
    
    	width: 200px;
    	border: 1px solid black;
    	}
    #rand {
    
    	width: 200px;
    	border-left: 1px solid black;
    	border-top: hidden;
    	border-bottom: hidden;
    	border-right: 1px solid black;
    	}
    #content {
    
    	width: 200px;
    	border-top: hidden;
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 5px;
    	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: white;
    	cursor: default;
    	background: black;
    	}
    #contentRollOver {
    
    	width: 200px;
    	border-top: hidden;
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 5px;
    	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: black;
    	cursor: default;
    	background: white;
    	}
    #spacer {
    
    	padding: 5px;
    	width: 200px;
    	height: 19px;
    	border: hidden;
    	}
    #spacerWhite {
    
    	padding: 5px;
    	width: 200px;
    	height: 19px;
    	border-top: hidden;
    	border-bottom: hidden;
    	border-right: 1px solid black;
    	border-left: 1px solid black;
    	background: white;
    	}
    #photos {
    float: left;
    position: relative;
    padding-top: 30px;
    margin-left: 30px;
    }
    Akh - why is not not okay to duplicate DIV ids? What if there is content which requires the same style but in a different place on the page, does this mean every instance of it must have its style defined? This would create loads of excess code I would think.

    Any tips on how to reduce mine would be good. I tried the shorthand trick (TRBL) but it didn't want to work for me.

    My next task is to get the #photos DIV to be hidden when the page loads, and appear when a link is clicked.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    13
    Rep Power
    0
    I understand now. I changed the repeating DIVs to class instead of id, but now my rollovers don't work. I'm using JavaScript rollovers:-

    Code:
    onMouseOver="this.id='contentRollOver';" 
    
    onMouseOut="this.id='content';"
    ..but they now don't work because it's classes, not ids. I changed the JavaScript to this.class but that doesn't work.

    What's the code i need to i can use both classes *and* have rollovers? It works with multiple IDs, but i'd like to be as compliant as possible.

    Thanks
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    Use this.className instead of this.id

    Hope this helps,
    Jeroen
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    13
    Rep Power
    0
    works perfectly, thankyou
  18. #10
  19. Senior Polecat
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Jersey (the original version)
    Posts
    210
    Rep Power
    12
    why is not not okay to duplicate DIV ids
    ID's are only meant to be used as unique identifiers of page objects within the DOM. You can't use the same ID for more than one element. It used to be the case that groups of elements could be given the same "name" parameter but this is being deprecated in XHTML 1.1

    What if there is content which requires the same style but in a different place on the page
    Use classes. Add the class parameter to the element ie: class="..." and then add the class to your stylesheet:
    .classname
    {
    Styling goes in here
    }

    Icy
    Quidquid latine dictum sit, altum viditur.

    http://www.XSet.co.uk
  20. #11
  21. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    13
    Rep Power
    0
    thanks, that's what i did based on the link that AKH posted.

    heh i've learned so much in the past day about CSS and whatnot. very cool technology indeed.
  22. #12
  23. Senior Polecat
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    Jersey (the original version)
    Posts
    210
    Rep Power
    12

    Wink


    sorry for the duplication of advice - i started typing a reply and then went and has luch - by the time i got back it had bee sorted
    Quidquid latine dictum sit, altum viditur.

    http://www.XSet.co.uk

IMN logo majestic logo threadwatch logo seochat tools logo