|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
August 6th, 2003, 02:24 PM
|
|||
|
|||
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
August 6th, 2003, 04:22 PM
|
||||
|
||||
|
#photos {float: left;}
As long as there is room, they will sit side by side, aligned at the top. cheers, gary
|
|
#3
August 6th, 2003, 05:19 PM
|
|||
|
|||
|
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?
|
|
#4
August 6th, 2003, 05:48 PM
|
||||
|
||||
|
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.
|
|
#5
August 6th, 2003, 08:09 PM
|
||||
|
||||
|
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>
|
|
#6
August 7th, 2003, 07:23 AM
|
|||
|
|||
|
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. 
|
|
#7
August 7th, 2003, 07:33 AM
|
|||
|
|||
|
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
|
|
#10
August 7th, 2003, 08:10 AM
|
||||
|
||||
|
Quote:
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 Quote:
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
|
|
#12
August 7th, 2003, 08:22 AM
|
||||
|
||||
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
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS columns side by side? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
