Web Hosting Talk






PDA

View Full Version : Trouble with divs

templatemake
06-03-2009, 09:03 PM
Ok so what I have is a container div which has divs left-light and left-frame inside the container div. My problem is I can't get both divs to sit right next to each other here is my code:
<style type="text/css">
<!--
body {
background-image: url(/wallpaper_black.png);
}
.container {
width: 1024px;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.left-light {
width: 100px;
margin left: auto;
position: absolute;
}
.left-frame
{
background-image: url(/leftframe.jpg);
background-repeat: repeat-y;
height: 800px;
width: 100px;
margin left: auto;
margin-right: 100px;
position: absolute;
}
-->
</style>
</head>

<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0">
<div class="container">
<div class="left-light"><img src="left_lighting.png" width="101" height="606" /></div>
<div class"left-frame"><img src="leftframe.jpg" /></div>
</div>
</body>
</html>
What im trying to do is have left-light div sit to the left and left-frame sit next to it on the left. Any help with this guys?
Logicidea
06-04-2009, 02:03 AM
Have you tried replacing

position: absolute;

by:

position: relative;
float: left;

for both divs?
theshoe
06-04-2009, 02:07 AM
I think you need to read up on 'position' and floats:

You need to decide whether you want to use float:left; or position:absolute;.

For example:

Assuming


<div id="container">
<div id="left">two</div>
<div id="right">tre</div>
</div>


You can choose this:


<style>
#container { width: 300px; }
#left { float: left; width: 100px; }
#right { float: left; width: 200px; }
</style>


Or this:


#container { width: 300px; position: relative; }
#left { width: 100px; position: absolute; left: 0; top: 0; }
#right { width: 200px; position: absolute; left: 100px; top: 0; }


Ya dig?
s2mu3123
06-04-2009, 02:49 PM
you can use position by setting absolut to relative and also make use of left and right float. so you will be able to get both the div's together.
templatemake
06-04-2009, 03:45 PM
OK well i've updated my code here is what I have now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body
{
background-image: url(wallpaper_black.png);

}
#container {
width: 1024px;

}

#box1 {
float: left;
width: 106px;
height: 606px;
}
#box2 {
width: 74px;
background-image: url(leftframe.jpg);
height: 800px;
background-repeat: repeat-y;
float: left;
}
#box3 {
float: left;
width: xxx;
}
#box4 {
float: left;
width: xxx;
}
#box5 {
float: left;
width: xxx;
}
-->
</style>
</head>

<body>


<div class="container">
<div class="box1"><img src="left_lighting.png" width="101" height="606" /></div>
<div class="box2"><img src="leftframe.jpg" width="73" height="400" /></div>
</div>

</body>
</html>


I'm still having problems with the divs not being next to each other. Thoughts?
s2mu3123
06-06-2009, 04:02 PM
For this try this below code hope so it works at your end.

<div class="container">
<table width="" border="0" cellspacing="" cellpadding="">
<tr>
<td align="left" valign="middle">
<div class="box1"><img src="left_lighting.png" width="101" height="606" /></div>
</td></tr>
<tr>
<td align="left" valign="middle">
<div class="box2"><img src="leftframe.jpg" width="73" height="400" /></div></td></tr>
</table>
</div>
<div clear="all"></div>


And try to adjust the width of it accordingly. Check the layout of it by making border="1" so that it will be easier to see the changes done.
theshoe
06-07-2009, 12:22 AM
Yeah, that's the cheaty way to do it (with tables) but it doesn't appear that you're displaying tabular data.
Replicada
06-07-2009, 11:55 AM
This is the basics removing all the hassles, the post above recommending the use of tables, from a W3C standard should be told off as this is blatently not tabular data :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
div.box1
{
width:100px;
float:left;
}

div.box2
{
width:100px;
float:left;
}

div.clearfloat
{
clear:both;
}

</style>
</head>

<body>

<div class="container">
<div class="box1"><img src="left_lighting.png" /></div>
<div class="box2"><img src="leftframe.jpg" /></div>
<div class="clearfloat"></div>
</div>

</body>
</html>

Also, if the divs are not used multiple times in this page I would suggest you used ids, as that is the intention of the class and identifier set-up of HTMl and CSS.

So something like this:

<div id="container">
<div id="box1"><img src="left_lighting.png" /></div>
<div id="box2"><img src="leftframe.jpg" /></div>
<div class="clearfloat"></div>
</div>


Then in the CSS/Styles you would reference said Id's with a hash '#' instead of a dot '.'

Goodluck.

Dan
Flam
06-08-2009, 01:30 AM
You can use display:inline;