SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Visalia CA
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Seeking CSS Help for 3 Horizontal Box Layout

    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:
    HTML Code:
    <!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:
    HTML Code:
    [HIGHLIGHT="CSS"].fltrt {  	float: right;
    	margin-left: 8px;
    }
    .fltlft { 	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }[/HIGHLIGHT]
    How should I modify the above so that all three boxes are on the same line horizontally?

    Thanks,
    Sid

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    4 divs. Container overflow hidden. The 3 divs in the container give float left margin whatever.

  3. #3
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Visalia CA
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    4 divs. Container overflow hidden. The 3 divs in the container give float left margin whatever.
    Thanks for your reply. Do you mean:
    HTML Code:
    <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?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Last edited by Paul O'B; Jun 30, 2011 at 01:46.

  5. #5
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Visalia CA
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code HTML4Strict:
    <!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>

    Code CSS:
    @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,
    Sid

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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.

  7. #7
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Visalia CA
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks much Paul. This makes a lot more sense. I appreciate your help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •