Float:Left Not Working? An Interaction with Other Elements?

6 replies [Last post]

Tue, 2014-03-25 17:08

StrongEagle

Offline

newbie

Singapore

Last seen: 9 years 4 days ago

Singapore

Timezone: GMT-5

Joined: 2008-09-24

Posts: 7

Points: 8

Hello, I'm reasonably acquainted with HTML and CSS but unable to solve a problem that I am having in making a modification to a web template from os-templates.com.

You can view this issue here: http://www.herberts.org/test/

Basically, I am trying to add the "C" logo to a div called "header" which contains the business name, tag line, and menu. My intention is to put locate it to the left side of the "header" div by creating a div "LogoImg" and setting it up with a float:left. I also specify a width of 165px.

But what seems to be happening when I look at this page in Firebug, is that the div "LogoImg" becomes the whole width of the header and thus just becomes the first row of multiple rows of divs in the header. I cannot figure out what is causing this behavior.

Code is posted below. I have annotated my additions with comments. Otherwise, the template is stock. For the html, I have only copied in the code for rendering the header, and just enough additional code so you can see that the next section renders the slider. I have included all of the CSS file.

Thanks for your help... this should help with my own forensic abilities as well.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="EN" dir="ltr" xml:lang="EN" xmlns="http://www.w3.org/1999/xhtml">
  <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
    <title>PlusBusiness</title>
    <meta content="no" http-equiv="imagetoolbar" />
    <link type="text/css" href="styles/layout.css" rel="stylesheet" />
    <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.jcarousel.pack.js" type="text/javascript"></script>
    <script src="scripts/jquery.jcarousel.setup.js" type="text/javascript"></script>
  </head>
  <body id="top">
    <!-- ####################################################################################################### -->
    <div class="wrapper col1">
      <div id="header">
 
<!--  I added the div and image for the "C" logo as below  -->
 
      	<div id="LogoImg">
      	  <img src="images/greylogo.gif">
      	  </div>
     	<div id="logo">
          <h1><a href="#">Catalyst Business
              Advocates</a></h1>
          <h6>Solutions for Business</h6>
        </div> 
        <div id="topnav">
          <ul>
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="style-demo.html">Services</a></li>
            <li><a href="full-width.html">Full Width</a></li>
            <li><a href="#">DropDown</a>
              <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
              </ul>
            </li>
            <li class="last"><a href="#">A Long Link Text</a></li>
          </ul>
        </div>
        <br class="clear" />
      </div>
    </div>
    <!-- ####################################################################################################### -->
    <div class="wrapper col2">
      <div id="featured_slide">
        <div id="featured_content">
          <ul>
            <li><img alt="" src="images/demo/1.gif" />
              <div class="floater">
                <h2>About This Template !</h2>
                <p>This is a W3C standards compliant free website template from
                  <a href="http://www.os-templates.com/">OS Templates</a>. This
                  template is distributed using a <a href="http://www.os-templates.com/template-terms">Website

And the CSS code - my additions are under the section titled "Header", about line 96

/*
Template Name: PlusBusiness
File: Layout CSS
Author: OS Templates
Author URI: <a href="http://www.os-templates.com/
Licence:" rel="nofollow">http://www.os-templates.com/
Licence:</a> <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>
*/
 
@import url(navi.css);
@import url(forms.css);
@import url(tables.css);
@import url(featured_slide.css);
 
 
body{
	margin:0;
	padding:0;
	font-size:13px;
	font-family:verdana, Arial, Helvetica, sans-serif;
	color:#333333;
	background-color:#FFFFFF;
	}
 
img{display:block; margin:0; padding:0; border:none;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart {list-style-type:none; margin:0; padding:0;}
.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}
 
a{
	color:#B2C629;
	background-color:#FFFFFF;
	outline:none;
	text-decoration:none;
	}
 
.fl_left{float:left;}
.fl_right{float:right;}
 
.imgl, .imgr{border:1px solid #999999; padding:5px;}
.imgl{float:left; margin:0 8px 8px 0; clear:left;}
.imgr{float:right; margin:0 0 8px 8px; clear:right;}
 
/* ----------------------------------------------Wrapper-------------------------------------*/
 
div.wrapper{
	display:block;
	width:100%;
	margin:0;
	text-align:left;
	}
 
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
	margin:0;
	padding:0;
	font-size:20px;
	font-weight:normal;
	line-height:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	}
 
.col1{color:#CCCCCC; background-color:#000000;}
.col2, .col2 a{color:#FFFFFF; background-color:#ABA30A;}
.col3{color:#777777; background-color:#FFFFFF;}
.col3 a{color:#95AD19; background-color:#FFFFFF;}
.col4{color:#FFFFFF; background-color:#000000;}
.col4 a{color:#95AD19; background-color:#000000;}
.col5, .col5 a{color:#333333; background-color:#95AD19;}
 
/* ----------------------------------------------Generalise-------------------------------------*/
 
#header{
	position:relative;
	margin:0 auto 0;
	display:block;
	width:1200px;  
}
 
#logo, #topbar, #homepage, #breadcrumb, #container, #footer, #copyright{
	position:relative;
	margin:0 auto 0;
	display:block;
	width:960px;  
	}
 
/* ----------------------------------------------Header-------------------------------------*/
 
#header{
	padding:20px 0;
	z-index:1000;
	}
 
/*  I added this div to the template */
 
#logoImg{
	display:block;
	float:left;
	width:165px;
} 
 
#header #logo h1, #header #logo p{
	margin:0;
	padding:0;
	line-height:normal;
	}
 
#header #logo h1{
	font-size:36px;
	text-align:center;
	text-transform:uppercase;
	}
 
#header h1 a{
	color:#ABA30A;
	background-color:#000000;
	}
 
#header #logo h6{
	text-align:center;
	}
 
/* ----------------------------------------------BreadCrumb-------------------------------------*/
 
#breadcrumb{
	padding:20px 0;
	}
 
#breadcrumb ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
#breadcrumb ul li{display:inline;}
#breadcrumb ul li.current a{text-decoration:underline;}
 
/* ----------------------------------------------Content-------------------------------------*/
 
#container{
	padding:20px 0;
	}
 
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
	margin:0 0 15px 0;
	padding:0 0 8px 0;
	border-bottom:1px solid #E7E6E6;
	}
 
/* ----------------------------------------------Homepage Block-------------------------------------*/
 
.homepage{
	display:block;
	width:100%;
	margin:15px 0 0 0;
	padding:0;
	}
 
.homepage ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
.homepage li{
	display:block;
	float:left;
	width:300px;
	margin:0 30px 0 0;
	padding:0;
	}
 
.homepage li.last{margin-right:0;}
 
.homepage li h2{
	display:block;
	width:100%;
	height:65px;
	margin:0;
	padding:15px 0 8px 0;
	font-weight:normal;
	line-height:normal;
	border-bottom:1px dotted #999999;
	}
 
.homepage li h2 img{
	float:left;
	margin:-15px 8px 0 0;
	padding:5px;
	border:1px solid #999999;
	}
 
.homepage p{
	margin:0 0 25px 0;
	padding:0;
	line-height:1.6em;
	}
 
.homepage p.readmore{
	display:block;
	text-align:right;
	line-height:normal;
	font-weight:bold;
	}
 
.homepage p.readmore a{
	padding:8px 15px 10px;
	color:#FFFFFF;
	background-color:#95AD19;
	}
 
/* ----------------------------------------------Content Block-------------------------------------*/
 
#content{
	display:block;
	float:left;
	width:600px;
	}
 
/* ------Comments-----*/
 
#comments{margin-bottom:40px;}
 
#comments .commentlist {margin:0; padding:0;}
 
#comments .commentlist ul{margin:0; padding:0; list-style:none;}
 
#comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}
 
#comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
#comments .commentlist li.comment_odd a{color:#95AD19; background-color:#F7F7F7;}
 
#comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
#comments .commentlist li.comment_even a{color:#95AD19; background-color:#E8E8E8;}
 
#comments .commentlist .author .name{font-weight:bold;}
#comments .commentlist .submitdate{font-size:smaller;}
 
#comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight: normal;text-transform: none;}
 
#comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}
 
/* ----------------------------------------------Column-------------------------------------*/
 
#column{
	display:block;
	float:right;
	width:300px;
	}
 
#column .holder{
	display:block;
	width:300px;
	margin-bottom:20px;
	}
 
#column .holder p{
	line-height:1.6em;
	}
 
#column .holder h2.title{
	display:block;
	width:100%;
	height:65px;
	margin:0;
	padding:15px 0 0 0;
	font-size:20px;
	line-height:normal;
	}
 
#column .holder h2.title img{
	float:left;
	margin:-15px 8px 0 0;
	padding:5px;
	border:1px solid #666666;
	}
 
#column .holder p.readmore{
	display:block;
	width:100%;
	font-weight:bold;
	text-align:right;
	line-height:normal;
	}
 
#column div.imgholder{
	display:block;
	width:290px;
	margin:0 0 10px 0;
	padding:4px;
	color:#666666;
	background-color:#F7F7F7;
	border:1px solid #CCCCCC;
	}
 
/* ----------------------------------------------Footer-------------------------------------*/
 
#footer{
	padding:20px 0;
	}
 
#footer ul{
	margin:0;
	padding:0;
	list-style:none;
	}
 
#footer h2{
	margin:0 0 15px 0;
	padding:0 0 8px 0;
	font-size:18px;
	color:#CCCCCC;
	background-color:#000000;
	border-bottom:1px dotted #CCCCCC;
	}
 
#footer .box{
	display:block;
	float:right;
	width:250px;
	margin:0 0 0 25px;
	padding:0;
	}
 
#footer .box1{
	display:block;
	float:left;
	width:400px;
	line-height:1.6em;
	}
 
#footer .box1 .imgl{border:1px solid #CCCCCC; padding:5px; color:#FFFFFF; background-color:#000000;}
 
#footer .contactdetails li{
	margin:0 0 8px 0;
	}
 
#footer .flickrbox, #footer .flickrbox .wrap{display:block; width:260px;}
#footer .flickrbox .wrap .fix{clear:both;}
#footer .flickrbox .wrap .flickr_badge_image{display:block; float:left; margin:0 10px 10px 0; width:80px; height:80px;}
#footer .flickrbox .wrap #flickr_badge_image3, #footer .flickrbox .wrap #flickr_badge_image6{margin-right:0;}
 
/* ----------------------------------------------Copyright-------------------------------------*/
 
#copyright{
	padding:10px 0;
	}
 
#copyright p{
	margin:0;
	padding:0;
	}

Tags:

Beginners CSS Questions

Tue, 2014-03-25 17:26

StrongEagle

Offline

newbie

Singapore

Last seen: 9 years 4 days ago

Singapore

Timezone: GMT-5

Joined: 2008-09-24

Posts: 7

Points: 8

I can't figure out how to

I can't figure out how to edit my post, so I reply instead. I ran the code through the w3 validator and it came up with a couple of errors. I post the corrections, below. Note that these corrections did not change the behavior I described.

Added required alt and /.

<img alt="" src="images/greylogo.gif" />

Tue, 2014-03-25 17:44

helldog2004

Offline

Enthusiast

Netherlands

Last seen: 6 years 34 weeks ago

Netherlands

Timezone: GMT+2

Joined: 2014-03-02

Posts: 205

Points: 239

Try this, change these

Try this, change these lines:

#logoImg{
	display:block;
	float:left;
	width:165px;
}

with these lines:

div #logoImg{
	display:block;
	float:left;
	width:165px;
}

Hope this helps

Check Maximum Webdesign for your online solutions

Tue, 2014-03-25 17:56

StrongEagle

Offline

newbie

Singapore

Last seen: 9 years 4 days ago

Singapore

Timezone: GMT-5

Joined: 2008-09-24

Posts: 7

Points: 8

Sorry - made no difference.

Tue, 2014-03-25 18:03

StrongEagle

Offline

newbie

Singapore

Last seen: 9 years 4 days ago

Singapore

Timezone: GMT-5

Joined: 2008-09-24

Posts: 7

Points: 8

Folks - I apologize... I

Folks - I apologize... I cannot edit my original post, thus I must add here. I read through the posting guidelines and add the following information.

a) I have a hard coded direct link to the image I am using.
b) I deleted all HTML code beginning with

<div class="wrapper col2">

to the end of the document.

c) I deleted all CSS code from the Breadcrumb section onwards.

The result is at the same URL as before: http://www.herberts.org/test/

And the result is the same.

Tue, 2014-03-25 18:34

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

#LogoImg img { float:

#LogoImg img {
  float: left;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2014-03-25 19:45

StrongEagle

Offline

newbie

Singapore

Last seen: 9 years 4 days ago

Singapore

Timezone: GMT-5

Joined: 2008-09-24

Posts: 7

Points: 8

Gary, Solution did not work.

Gary, that solution did not work. Sorry - preview in editor looked ok but not in Chrome or FF as the div LogoImg shows that it is 1200 x 162. So while the image is indeed floated left the container is too wide. You can see this at http://www.herberts.org/test/index.html

I also found that at line 23 of the css file, the template author had this line:

img{display:block; margin:0; padding:0; border:none;}

I added "float:left;" to this line and it worked but it has thoroughly messed up the slider. See http://www.herberts.org/test/index2.html

Edit: Slider is not messed up - my bad for commenting out the css file for it.

To be clear then, you solution is a nested nested selector whereby the attributes of "img" are altered only for "LogoImg"? Does that mean that all of the other attributes specified in the line above are inherited as well for "LogoImg"? And if the line above had "float:right;" and I used your solution, it would override the default value?

Thanks much for your help.

Float:Left Not Working? An Interaction with Other Elements?

I can't figure out how to

Try this, change these

Sorry - made no difference.

Folks - I apologize... I

#LogoImg img { float:

Gary, Solution did not work.

User login

Navigation