Hello,
I am having a lot of problems figuring out layout in CSS. There are a
couple of problems that I am facing:
1. My layout requires me to have 3 sections at the top of the page. So
I broke these up into three divs each with float: left. But when I
reduce the width of the browser each of these div wrap under the
other. I thought putting overflow:hidden would help but it doesnt seem
to. Can someone please help here.
2. I put all the contents of my page in one big DIV tag and centered
it. The third section of the header, which is a login form is also
constructed using CSS floats instead of a table. This form, displays
correctly in IE 6 but looks horrible in Mozilla Firefox. Can someone
please point out where I going wrong.
3. Am I approaching my layour problem in the right manner? Is there a
better solution?
Thank You
Here is my html code:
-------------------------------------------------------------------------------
<body>
<div id="allContent" >
<div id="header">
<div id="topLeftAd" >
<span class="default-pos">
<object type="applicati on/x-shockwave-flash"
data="flash/topLeftad.swf" width="168" height="100">
<param name="topLeftAd " value="flash/topLeftad.swf">
<img src="noflash.gi f" width="683" height="198" alt="" />
</object>
</span>
<span class="default-pos">
<img src="images/songsixty.png" alt="SongSixty. com"
style="border:0 px; clip: rect(10px 10px 10px 10px);" />
</span>
</div>
<div id="topRightLog in">
<div class="row">
<span class="floatLef t"><b>Login</b></span>
<span class="floatRig ht"><b><a href="#">Sign Up
Now!</a></b></span>
</div>
<div class="row">
<span class="floatLef t">Email ID:</span>
<span class="floatRig ht"><input type="text" name="email_id"
value="" class="textBox" size="20" /></span>
</div>
<div class="row">
<span class="floatLef t">Password: </span>
<span class="floatRig ht"><input type="password" name="password"
class="textBox" size="20" /></span>
</div>
<div class="row">
<span class="floatLef t"><input type="button" value="Login"
class="button" /></span>
<span class="floatRig ht"><a href="#">Forgot your
password?</a></span>
</div>
</div>
</div>
</div>
</body>
----------------------------------------------------------------------------
And here is my CSS
div#allContent {
position: relative;
margin: 0px;
padding: 0px;
width: auto;
border: 2px solid #E0E0E0;
}
body {
margin: 0% 12.25% 0% 12.25%;
padding: 0px;
background-color: #CCCCCC;
}
div#header {
padding: 0px;
margin: 0px;
width: 100%;
height: 100px;
overflow: hidden;
}
div#topLeftAd {
border-width: 0px;
padding: 0px;
margin: 0px;
float: left;
width: auto;
height: 100%;
overflow: inherit;
}
div#topRightLog in {
padding: 0px 5px 0px 0px;
margin: 0px;
float: left;
width: auto;
max-width: none;
height: 100%;
font-size: 10px;
font-family: sans-serif;
color: #666666;
background-color: #FFFFFF;
border: 0px solid #000000;
overflow: inherit;
}
..row {
clear: both;
padding: 4px 0px 0px 0px;
font-family: sans-serif;
font-size: 10px;
color: #666666;
text-align: left;
}
..floatLeft {
float: left;
font-family: inherit;
font-size: inherit;
color: inherit;
text-align: inherit;
width: 28%;
}
..floatRight {
float: right;
font-family: inherit;
font-size: inherit;
color: inherit;
text-align: inherit;
width:72%;
}
