Dumb Newbie: Aligning CSS elements alongside

Discussion in 'CSS' started by Supergrover1981, Sep 1, 2006.

0
  1. #1
    Gidday Gang,

    I'm trying to align 2 elements alongside each other in CSS, as would typically be done in tables by puting 2 (TD) tags inside the same (TR) tag.

    Is there any way to do this without using "float"? Although I can get them to align successfully using "float", the floated elements then appear outside the parent element in Firefox.

    I've tried using position: relative, but it still places the 2nd element below the 1st. Any suggestions most appreciated, example can be viewed at:

    http://www.johnbayne.com/hiclone1/4.html

    Many thanks gang, most appreciated. :D

    CSS:

    
/* CSS Document */
<style type="text/css">
/* CSS Document */
html,body{height:100%;}

* {margin:0;padding:0;}

body {font-family:Arial, Helvetica, sans-serif;font-size:10px;
background:url(background.jpg) repeat-x;
}

head+/**/body .fc:after{ /* min-height browser but not IE 7 */
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}

/* \*/
* html .fc{height:1%;} /* IE 5 5.5 6 */
/* */

#mainbox {
background:#FFF;
width:765px;
margin:-2px auto 0 auto;
border:2px solid #666;
border-top:none;
}
* html #mainbox {height:100%;}
head+body #mainbox {min-height:100%;}

.header{
background:url(topbg.jpg) repeat-x;
width:759px;
height:80px;
margin:3px 3px 0 3px;
}

.header ul{float:right;list-style:none;width:404px;}

.header li{float:right;width:101px;}

.header a{
display:block;
height:25px;
text-align:center;
font-weight:bold;
line-height:14px;
color: #FFFFFF;
padding-top:55px;
background:url(topmenubackgroundtp.gif) top left no-repeat;
}

.header a:link,.header a:visited {
background-color: #059;
text-decoration: none;
}

.header a:active {background-color:#AAA;}

.header a:hover {background-color:#27b;text-decoration:underline;}

.header img {
border:none;
width:305px;
height:47px;
float:left;
}

.blacktitle {
background:#000;
margin: 3px;
color:#CEF;
font-weight:900;
text-transform: uppercase;
text-align:center;
border-top:2px solid #FFF;
padding: 5px 0 5px 0;
}

.promobanner {
margin:3px 3px 0 3px;
background: url(bannerbackground.jpg) repeat-y;
height:156px;
border-top: 2px solid #CCC;
}

.px{
position:relative;
height:10px;
margin:0 -2px;
background:url(background.jpg) repeat-x;
border-bottom:2px solid #666;
overflow:hidden;
}

.topspacer {
margin-top: 30px;
}

.menubutton1 {
float: left;
left: 0px;
width: 120px;
height: 130px;
background: #036 url('whatishiclone.jpg') no-repeat 0px 20px;
margin: 4px;
padding-left: 115px;
padding-top: 50px;
padding-right: 5px;
border-style: outset;
border-width: 3px;
border-color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 400;
color: #FFFFFF;
}

.menubutton1:hover {
border-color: #FFF;
}

.menubutton2 {
float: left;
left: 200px;
width: 120px;
height: 130px;
background: #666 url('fuelcalculator.jpg') no-repeat 0px 20px;
margin: 4px;
padding-left: 115px;
padding-top: 50px;
padding-right: 5px;
border-style: outset;
border-width: 3px;
border-color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 400;
color: #FFFFFF;
}
    Code (markup):
    HTML:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if IE]>
<style type="text/css">
*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
</style>
<![endif]-->
<link href="1css.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="mainbox">
<div class="px">&nbsp;</div>

<div class="header fc">
<img src="hiclonetitle.jpg" alt="HiClone Title" />
<ul>
<li><a href="order.html">Order Now</a></li>
<li><a href="cow.html">Fuel Calculator</a></li>
<li><a href="product.html">Product Info</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>

<div class="blacktitle">
<p>HiClone is the best thing ever invented ever. No seriously, it is. I’m not kidding. It’s better than sex” - Albert Einstein, 1939</p>
</div>

<div class="promobanner"><IMG SRC="bannerpic.jpg" BORDER="0" ALIGN="LEFT"><IMG SRC="bannertext1.jpg" BORDER="0" class="topspacer"/><BR /><IMG SRC="bannertext2.jpg" BORDER="0" class="topspacer" /></div>
<div class="menubutton1">HiClone is a simple, maintenance-free device that can improve your vehicle’s power and offer dramatic reductions in your fuel costs</div><div class="menubutton2">Want to see how much you could save? We provide a free calculator to help you estimate how much a HiClone system could save you.</div>
</div>

</body>
</html>
    Code (markup):
     
    Supergrover1981, Sep 1, 2006 IP
  2. Mano70

    Mano70 Peon

    Messages:
    42
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You are floating both divs left. I see you are asking how to do this without floating, but floating is the correct way to do it.

    Here is just some quick code taken from a site where I do this:

    CSS:
    #content {
    width: 533px;
    }
    .wrapLeft {
    float: left;
    padding: 0 5px 10px 0;
    }
    .wrapRight {
    float: right;
    padding: 0 0 10px 5px;
    }
    .wrapLeft, .wrapRight {
    width: 258px;
    }
    .clear {clear:both;}

    HTML:
    <div id="content">
    div class="wrapLeft">Left text 1st row</div>
    <div class="wrapRight">Rigth text1st row</div>
    <div class="clear"></div>
    div class="wrapLeft">Left text 2nd row</div>
    <div class="wrapRight">Rigth text 2nd row</div>
    </div>
     
    Mano70, Sep 1, 2006 IP
  3. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Couldn't you set the divs that you want to be next to each other as display: inline; ?
     
    Gordaen, Sep 1, 2006 IP