...

View Full Version : CSS issue



SiKni8
08-07-2011, 03:02 AM
I have the following HTML file:
<html>
<head>
<title>FV.com - See it your way</title>
<style>
* {
margin: 0;
padding: 0;
}
#topNav {
margin: 0 auto;
padding: 0px 0px 0px 0px;
text-align: left;
width: 100%;
background: #000000;
height: 55px;
position: absolute;
background-image: url(bg.png);
}
#leftpart {
margin: 0 auto;
padding: 0px 0px 0px 0px;
text-align: left;
float: left;
width: 500px;
height: 55px;
position: relative;
border-radius: 5px;
-moz-border-radius: 5px;
}
#rightpart {
margin: 0 auto;
padding: 0px 10px 0px 10px;
text-align: center;
float: right;
width: 500px;
height: 55px;
background: #ffffff;
position: relative;
border-radius: 5px;
-moz-border-radius: 5px;
}
#emptypartl {
margin: 0 auto;
padding: 0px 10px 0px 10px;
text-align: center;
float: left;
width: 20px;
height: 55px;
position: relative;
}
#emptypart {
margin: 0 auto;
padding: 0px 10px 0px 10px;
text-align: center;
float: right;
width: 20px;
height: 55px;
position: relative;
}
</style>
</head>

<body>
<div id="topNav">
<div id="emptypartl"></div>
<div id="leftpart">THIS IS A TEXT</div>
<div id="rightpart"></div>
<div id="emptypart"></div>
</div>
</body>
</html>

what i am trying to do is have the emptypartl indent the leftpart from the left and emptypart index the rightpart from the right something similar to the image below.

http://i56.tinypic.com/m79ye1.jpg

Thanks!

BubikolRamios
08-07-2011, 05:22 AM
<html>
<head>
<title></title>
<style>
* {
margin: 0;
padding: 0;
border:1px solid black;
}

#emptypartl
{
width: 20px;
height: 55px;
float:left;
}

#leftpart {
width: 500px;
height: 55px;
float:left;

}
#rightpart {
width: 500px;
height: 55px;
float:right;
}

#emptypartr
{
width: 20px;
height: 55px;
float:right;
}
</style>
</head>

<body>

<div id="emptypartl">el</div>
<div id="leftpart">left</div>

<div id="emptypartr">er</div>
<div id="rightpart">right</div>


</body>
</html>


Note the order of elements in HTML, at red part. That is important !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum