SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Complicated CSS Float. Left, Right, Top Problems

    I have a page with a header div. After that is the content. I have images floating on the left to produce an arc. I have an image and an H1 floating on the right. I'm putting content into the page and it flows nicely past the left and right floats.

    The problem is when I want to put another left and right column into the content with div tags. It wants to start after my left side images. I can't get it to start from the top of the area.

    I'm not sure if links work here, but here is a link to the page I'm working on that works:

    http://www.critterpal.com/gotpet/index.php

    This is the page that I'm trying to break into 2 more columns (as indicated by the "2colwrapper", "linksLeft", "linksRight", and "2col" designators below).

    http://www.critterpal.com/gotpet/links.php

    I'm trying to get the Facebook box to float next to the links column.

    This is my stripped-down code for my page:

    HTML Code:
    <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'> 
    <html> 
    <head>
    </head> 
    <body> 
     
    <!-- begin top header with images --> 
     
    <div id='headerwrapper'> 
    	<div id='header1'> 
    	</div> 
    	<div id='header2'> 
    	</div> 
    	<div id='rotating1'> 
    	</div> 
    	<div id='rotating2'> 
    	</div> 
    	<div id='rotating3'> 
    	</div> 
    	<div id='rotating4'> 
    	</div> 
    </div> 
    <!-- end top header with images --> 
    <!-- begin content area --> 
    <div id='contentwrapper' class='clearfix'> 
    	<div id='sideimage1'> 
    	</div> 
    	<div id='titlelogowrapper'> 
    		<div id='logo'><img src='../...png' width='135' height='158'></div> 
    		<div id='main-title'><h1>title</h1></div> 
    	</div> 
    	<div id='sideimage2'> 
    	</div> 
    	<div id='sideimage3'> 
    	</div> 
    	<div id='sideimage4'> 
    	</div> 
    	<div id='sideimage5'> 
    	</div> 
    	<div id='sideimage6'> 
    	</div> 
    	<div id='sideimage7'> 
    	</div> 
    	
    	<div id='content'> 
    	
    <p id='first'> <P> 
     
    <div id='2colwrapper'> 
     
    <div id='linksLeft' class='2col'> 
    <h2>title</h2> 
     
    <ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    </ul> 
     
    <h2>title</h2> 
     
    <ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    </ul> 
    </div> 
     
    <div id='linksRight' class='2col'>
    
    <script type='text/javascript' src='http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'></script><script type='text/javascript'>FB.init('xxx');</script><fb:fan profile_id='xxx' stream='1' connections='10' width='300'></fb:fan><div style='font-size:8px; padding-left:10px'><a href='http://www.facebook.com/pages/xxx'>xxx</a> on Facebook</div> 
    </div> 
     
    </div> 
     
     
    	</div> 
     
    </div> 
    <!-- end content area --> 
     
    <div class='clear'> </div> 
     
    <!-- begin footer area --> 
     
    <div id='footerwrapper'> 
     
    <ul id='menu'><li id='menuitem'></li><wbr></ul> 
    </div> 
     
    <!-- end footer area --> 
     
    </body> 
    </html>
    Here's my css:

    HTML Code:
    BODY {
    	margin: 0%;
    	font-family: Arial, Helvetica, sans-serif;
    	scrollbar-base-color: #EA2C2C;
    	background-image: url("../images/topbackground.jpg");
    	background-repeat: repeat-x;
    }
    
    P {
    	margin-bottom: 0px;
    }
    
    DIV, UL {
    	margin: 0px;
    }
    
    LI {
    	line-height: 150%;
    }
    
    #headerwrapper {
    	height: 125px;
    	padding-bottom: 0px;
    	margin-bottom: 0px;
    	display: block;
    }
    
    #header1 {
    	background-image: url("../images/arc8_01.jpg");
    	background-repeat: no-repeat;
    	position: absolute;
    	top: 1px;
    	width: 32px;
    	height: 125px;
    }
    
    #header2 {
    	background-image: url("../images/arc6_02.jpg");
    	background-repeat: no-repeat;
    	position: absolute;
    	top: 1px;
    	left: 32px;
    	width: 118px;
    	height: 125px;
    }
    
    #rotating1, #rotating2, #rotating3, #rotating4 {
    	position: absolute;
    	top: 1px;
    }
    
    #rotating1 img, #rotating2 img, #rotating3 img, #rotating4 img {
    	border: 0px;
    }
    
    #rotating1 {
    	left: 150px;
    }
    
    #rotating2 {
    	left: 300px;
    }
    
    #rotating3 {
    	left: 450px;
    }
    
    #rotating4 {
    	left: 600px;
    }
    
    #contentwrapper {
    	background-image: url("../images/redbackground.jpg");
    	background-repeat: repeat-y;
    	display: block;
    	padding-top: 0px;
    	margin-top: 0px;
    }
    
    #sideimage1, #sideimage2, #sideimage3, #sideimage4, #sideimage5, #sideimage6, #sideimage7 {
    	background-repeat: no-repeat;
    	float: left;
    	clear: left;
    	padding-right: 6px;
    }
    
    #sideimage1 {
    	background-image: url("../images/sidebararc_01a.jpg");
    	width: 70px;
    	height: 50px;
    }
    
    #sideimage2 {
    	background-image: url("../images/sidebararc_02a.jpg");
    	width: 59px;
    	height: 50px;
    }
    
    #sideimage3 {
    	background-image: url("../images/sidebararc_03a.jpg");
    	width: 51px;
    	height: 50px;
    }
    
    #sideimage4 {
    	background-image: url("../images/sidebararc_04a.jpg");
    	width: 45px;
    	height: 50px;
    }
    
    #sideimage5 {
    	background-image: url("../images/sidebararc_05a.jpg");
    	width: 40px;
    	height: 50px;
    }
    
    #sideimage6 {
    	background-image: url("../images/sidebararc_06a.jpg");
    	width: 37px;
    	height: 50px;
    }
    
    #sideimage7 {
    	background-image: url("../images/sidebararc_07a.jpg");
    	width: 34px;
    	height: 50px;
    }
    
    #content {
    	margin-left: 40px;
    	margin-right: 2em;
    	padding-top: 2em;
    }
    
    #titlelogowrapper {
    }
    
    #main-title h1 {
    	float: right;
    	text-align: right;
    	letter-spacing: .05em;
    	word-spacing: .4em;
    	color: #7A3393;
    	width: 40%;/* em width variance by element*/
    	margin: 0.4em 0.4em 0.4em 1em;
    	padding: 0em 0.6em 0em 0.6em;
    	background: #A6C63F;
    	border-left: 3px dotted #EA2C2C;
    	border-bottom: 3px dotted #EA2C2C;
    }
    
    #logo img {
    	float: right;
    	padding: 0em 0.8em 0.4em 0em;
    }
    
    p#first {
    	margin-top: 0px;
    	border-top: 5px dotted #A6C63F;
    }
    
    #content p {
    	text-indent: 3em;
    }
    
    #content ul {
    	padding-left: 3em;
    }
    
    #footerwrapper {
    	clear: both;
    	color: #ffffff;
    	width: 100%;
    	background: #EA2C2C;
    	display: block;
    	text-align: center;
    }
    
    #menu {
    	list-style-type: none;
    	list-style-image: none;
    }
    
    #menuitem {
    	display: inline;
    	padding: 0px 1em .5em 1em;
    	white-space: nowrap;
    }
    
    #menuitem a {
    	text-decoration: none;
    	color: #ffffff;
    	border-bottom: 1px dotted #ffffff;
    }
    
    #menuitem a:hover {
    	text-decoration: underline;
    }
    
    #monkey, #copyright {
    	font-family: typewriter, Lucidia Sans Typewriter, harting, keyboard, courier, monospace;
    	color: #000000;
    	text-align: center;
    	background: #EA2C2C;
    }
    
    #copyright {
    	font-size: small;
    }
    
    #monkey {
    	font-size: xx-small;
    }
    
    .clear {
    	clear: both;
    }
    
    .large {
    	font-size: xx-large;
    }
    
    .purple {
    	color: #7A3393;
    }
    
    .center {
    	text-align: center;
    }
    
    .bold {
    	font-weight: bold;
    }
    
    .2col {
    	width: 40%;
    }
    
    .floatLeft {
    	float: left;
    }
    
    .floatRight  {
    	float: right;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm a bit confusedd. You don't even appear to have tried.

    Adding float:left to .col2 gets them side by side.
    Code:
    .col2{float:left;}
    Is that all you wanted?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it doesn't.

    I added that to my .css and it's not working. I'm looking at all 3 major browsers and it's only in 1 column.

    I did try quite a few different things for several hours today but nothing took properly. My .css doesn't reflect every attempt I made at positioning properly.

    When I try to float one column left and the other right the start point is under the left-hand arc.

    The links above at this very moment (7:56pm Eastern) reflects the css with {float:left;}

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Whoops missed this .

    You can't have a class name start with a number, like .2col is invalid.

    .col2 isn't . Change the HTML and CSS to reflect that.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I forgot you can't have ids and classes start with a number. I changed those instances.

    This is my current html and css:

    HTML Code:
    <div id='col2wrapper'>
    
    <div id='linksLeft' class='col2wide floatLeft'>
    <h2>J:</h2>
    
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    
    <h2>Js:</h2>
    
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    </div>
    
    <div id='linksRight' class='col2wide floatRight'>
    <script type='text/javascript' src='xx'></script><script type='text/javascript'>FB.init('xx');</script><fb:fan profile_id='5xx' stream='1' connections='10' width='300'></fb:fan><div style='font-size:8px; padding-left:10px'><a href='http://www.facebook.com/pages/xx'>xx</a> on Facebook</div> 
    </div>
    
    </div>
    HTML Code:
    .floatLeft {
    	float: left;
    }
    
    .floatRight  {
    	float: right;
    }
    
    .col2wide {
    	width: 40&#37;;
    }

    I trimmed the majority out of it.


    Look at the link to the page now (10:28 Eastern). See how the 2 columns start under the arch at the left?

    I would like the columns to start at the top, closer to the dotted line.

  6. #6
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me correct myself:

    It looks perfect in Internet Explorer 8. It's not working properly in Firefox or Google Chrome.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The CSS file still has this
    Code:
    .2col {
    	width: 40&#37;;
    }
    And not the .col2wide{}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had to check because I thought I changed deleted .2col to .col2wide. And yes I did. You must have a cached version of the stylesheet or must have misread it.


    I did the .col2wide at 40&#37; wide so that both the left and right columns would only comprise 80% of the width.


    Still not working in FF or Chrome.

  9. #9
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait wait... I think I forgot to upload the new stylesheet....

  10. #10
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very odd... I'm uploading the stylesheet into the proper folder with FileZilla but everytime I go to check the stylesheet via URL http://www.critterpal.com/gotpet/sty...stylesheet.css I see the old info in there.

    Is my browser caching the stylesheet? How do I force it to reload a new css?

  11. #11
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My mistake again. I did a SHIFT + RELOAD and it is indeed the new stylesheet.


    So, new stylesheet and still have it not working properly in FireFox and Chrome.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,280
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You may need to re-think a little bit as the sideimages are floated left but are also each clear:left. That means that any other floats you want to follow can't rise past the last cleared float.

    You could wrap the sideimages in a parent float themselves so that it contains the clearing and that would allow other floats to rise alongside.
    Code:
    <div style="float:left;clear:left">
        <div id='sideimage2'> </div>
        <div id='sideimage3'> </div>
        <div id='sideimage4'> </div>
        <div id='sideimage5'> </div>
        <div id='sideimage6'> </div>
        <div id='sideimage7'> </div>
        </div>
    (inline styles for example only)

    (However if you do that then you may have well put all the images into one large image anyway.)

    I think you would be better in just using a background image for the whole arc and save on complicating the html. You could just add some padding or margins to inner elements to keep them clear where necessary.

    That's the way I would do it and it gets rid of loads of divs at the same time.

    Hope that explains what's happening

  13. #13
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I had to do it. I used a table to create 2 columns on that one.

    Oh well.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Tables may be the easy way out but no you did NOT have to use tables to achieve this .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •