Good Morning,
I have the need to create 3 horizontal containers or boxes on my page that will eventually house JPGs. I’m having a challenge getting the CSS to work correctly. Here’s what I’ve done thus far:
<!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>Home Page</title>
<link type="text/css" href="style.css"/>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<img name="logo" src="" width="32" height="32" alt="logo" />
<div id="utiltynav" class="fltrt">
<a href="#">Login</a>
<a href="#">Help</a>
</div><!-- utilitynav -->
<ul id="main_nav" class="fltrt">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div><!-- header -->
<div class="content">
<div class="fltlft">
<img name="uploadtext" src="" width="50" height="50" alt="upload" />
</div><!-- leftbox -->
<div class="fltrt">
<img name="view_results" src="" width="50" height="50" alt="results" />
</div><!-- rightbox -->
<div class="clearfloat">
<img name="convert_text" src="" width="50" height="50" alt="convert"/>
</div><!-- midbox -->
<div class="clearfloat">
Sign Up
</div><!-- signup -->
<div class="testimonials">
Testimonials
</div><!-- testimonials -->
</div><!-- content -->
<div class="footer">
<ul id="main_nav" class="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div><!-- footer -->
</div><!-- wrapper -->
</body>
</html>
CSS File:
```css
.fltrt { float: right;
margin-left: 8px;
}
.fltlft { float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
How should I modify the above so that all three boxes are on the same line horizontally?
Thanks,
Sid
4 divs. Container overflow hidden. The 3 divs in the container give float left margin whatever.
Thanks for your reply. Do you mean:
<div class="content">
<div class="fltlft">
<img name="uploadtext" src="" width="50" height="50" alt="upload" />
</div><!-- leftbox -->
<div class="fltrt">
<img name="view_results" src="" width="50" height="50" alt="results" />
</div><!-- rightbox -->
<div class="clearfloat">
<img name="convert_text" src="" width="50" height="50" alt="convert"/>
</div><!-- midbox -->
<div class="clearfloat">
Sign Up
</div><!-- signup -->
<div class="testimonials">
Testimonials
</div><!-- testimonials -->
</div><!-- content -->
So, my leftbox is the first div with class=fltlft, then my rightbox with class=fltrt followed by the midbox which is to be placed between leftbox and right box with class=clearfloat. I’m not sure how to modify the above based on your response. Could you further elaborate?
PaulOB
June 29, 2011, 9:22pm
4
Hi,
If thee three floats are of equal width then just float them all in order to the left with the correct width. Set the parent of the floats to overflow:hidden and it will contain the floats without the need for a clearer.
If the left and right floats are fixed width and the center is fluid then float the left box first to the left and then the right box floated right and finally the third element will be non floated and will rise up between the floats automatically. If you then add overflow:hidden to that third element it will then stay snugly between the other two floats and not wrap underneath (IE6 and 7 will need zoom:1.0 to force haslayout though).
It’s hard to give a specific answer without seeing the rest of the page and how its constructed.
Hi Paul,
I’m striving for a simlar layout as 37signals and crazyegg wherein there are 3 to 4 content boxes in the main part of the page. Here’s the latest HTML and CSS:
<!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>Home Page</title>
<link type="text/css" href="style.css"/>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<img name="logo" src="" width="32" height="32" alt="logo" />
<div id="utilitynav" class="fltrt">
<a href="#">Login</a>
<a href="#">Help</a>
</div><!-- utilitynav -->
<ul id="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div><!-- header -->
<div class="content">
<div class="fltlft">
Upload Text to Our Server<br/>
<img name="uploadtext" src="" width="50" height="50" alt="upload" />
</div><!-- leftbox -->
<div class="fltrt">
View Your Converted Text<br/>
<img name="view_results" src="" width="50" height="50" alt="results" />
</div><!-- rightbox -->
<div class="uploadimg">
We Convert Your Uploaded File<br/>
<img name="convert_text" src="" width="50" height="50" alt="convert"/>
</div><!-- midbox -->
<div class="clearfloat">
Sign Up
</div><!-- signup -->
<div class="testimonials">
Testimonials
</div><!-- testimonials -->
</div><!-- content -->
<div class="footer">
<ul id="main_nav" class="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div><!-- footer -->
</div><!-- wrapper -->
</body>
</html>
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #FFF;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
list-style-type:none;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline; }
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
#wrapper {
width: 960px;
background: #FFF;
margin: 0 auto;
}
#header {
background: #FFF;
}
#utilitynav{
float:right;
list-style-type: none;
list-style:none;
}
#main_nav{
list-style-type: none;
list-style:none;
float:right;
}
#content {
padding: 10px 0;
}
/* ~~ The footer ~~ */
#footer {
padding: 10px 0;
background: #CCC49F;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
overflow: hidden;
height:0;
font-size: 1px;
line-height: 0px;
}
.li{
display:block;
}
The fltlft class is working as that DIV is floated left. However, the uploading class isn’t working as it’s coming down to the next line.
Separately, how do I style the unordered lists for horizontal orientation?
Thanks,
PaulOB
June 30, 2011, 9:07am
6
Hi,
If you have a fixed with then you could just float all three boxers but make sure they have the correct width because although a float will shrinkwrap its content the content will attempt to push the float to be 100% wide (e.g. a line of text will stretch the float to be 100% wide and nothing else can sit next to it so you need a width in these cases).
Using the float left and right method that you have already used then the code would look like this.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<link type="text/css" href="style.css"/>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #FFF;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
list-style-type:none;
}
h1, h2, h3, h4, h5, h6, p {
margin:0 0 .5em;/* set a default bottom margin */
padding-right: 15px;/* ??? its unlikely that you want this on every element */
padding-left: 15px;/* ??? its unlikely that you want this on every element */
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
#wrapper {
width: 960px;
background: #FFFccc;
margin: 0 auto;
overflow:hidden;/* contain floats*/
}
#header {
background:#fcf;
width:100%;
overflow:hidden;/* contain floats*/
margin:0 0 10px;
}
#utilitynav {
float:right;
list-style-type: none;
list-style:none;
background:yellow;
}
#main_nav,.nav {
list-style-type: none;
list-style:none;
float:right;
margin:0 0 20px;
padding:0;
}
#main_nav li,.nav li{
float:left;
margin:0 10px;
}
#content {
padding: 10px 0;
clear:both;
width:100%;
overflow:hidden;/* contain floats*/
}
/* ~~ The footer ~~ */
#footer {
padding: 10px 0;
background: #CCC49F;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
float: right;
margin-left: 8px;
background:#fc00ff;
}
.fltlft {
float: left;
margin-right: 8px;
background:red;
}
.clearfloat {
overflow: hidden;
height:0;
font-size: 1px;
line-height: 0px;
}
.li {
display:block;
}
.uploadimg{background:green}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> <img name="logo" src="" width="32" height="32" alt="logo" />
<div id="utilitynav" class="fltrt"> <a href="#">Login</a> <a href="#">Help</a> </div>
<ul id="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
<!-- header -->
<div class="content">
<div class="fltlft"> Upload Text to Our Server<br/>
<img name="uploadtext" src="" width="50" height="50" alt="upload" /> </div>
<div class="fltrt"> View Your Converted Text<br/>
<img name="view_results" src="" width="50" height="50" alt="results" /> </div>
<div class="uploadimg"> We Convert Your Uploaded File<br/>
<img name="convert_text" src="" width="50" height="50" alt="convert"/> </div>
<p>Sign Up </p>
<div class="testimonials"> Testimonials </div>
</div>
<!-- content -->
<div class="footer">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
</div>
<!-- wrapper -->
</body>
</html>
I coloured things so that you could see where they were. You still should give the floats a width unless you wanted some fluidity. If all three floats are specified widths then I would change the code and float them all left with the correct width instead.
Thanks much Paul. This makes a lot more sense. I appreciate your help:)