Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div float issues

    Hiya,

    I'm trying to create a 3 column layout, with a seperate block system in the central column, which again can have up to 3 columns. Like this:

    Div float issues-layout.jpg

    I've created the layout, but i'm having problems with the floated divs and where to clear them. If the left column is too long, the entire contents of the center div are shunted down the page because of the div-clear. I need to clear JUST the center div, not the whole page. I know you can use position:relative to do this sort of thing but i can't get it working!

    All help appreciated



    Styles so far...

    #left-column {
    float: left;
    }
    #right-column {
    float: right;
    }
    #center-column {
    }
    #usermodules { /*u1, u2, u3*/
    padding: 0px 0px 0px 0px;
    }
    #user2modules { /*u4, u5, u6*/
    padding: 0px 0px 0px 0px;
    }
    #blockw99 {float: left; width: 99%; padding:0 5px 0} /*used to auto change the width to fit in 3 columns if blocks turned on or off*/
    #blockw49 {float: left; width: 47%; padding:0 5px 0} /*used to auto change the width to fit in 2 columns if blocks turned on or off*/
    #blockw33 {float: left; width: 30%; padding:0 5px 0} /*used to auto change the width to fit in 1 column if blocks turned on or off*/


    html so far...
    PHP Code:
    <!-- Begin Main Content Area -->
        <div id="main-section">
            <!-- Begin Left Column -->
                <div id="left-column">
                    <jdoc:include type="modules" name="left" style="rounded" />
                </div>
            <!-- End Left Column -->
            <!-- Begin Right Column -->
                <div id="right-column">
                    <jdoc:include type="modules" name="right" style="rounded" />
                </div>
            <!-- End Right Column -->
            <!-- Begin Center Column -->
            <div id="center-column">
                <?php if ($this->countModules('user1') or $this->countModules('user2') or $this->countModules('user3')) : ?>
                    <div id="usermodules" class="spacer<?php echo "$usermod_width";?>">
                        <?php if ($this->countModules('user1')) : ?>
                            <div id="block<?php echo "$usermod_width";?>">
                                <jdoc:include type="modules" name="user1" style="rounded" />
                            </div>
                        <?php endif; ?>
                        <?php if ($this->countModules('user2')) : ?>
                            <div id="block<?php echo "$usermod_width";?>">
                                <jdoc:include type="modules" name="user2" style="rounded" />
                            </div>
                        <?php endif; ?>
                        <?php if ($this->countModules('user3')) : ?>
                            <div id="block<?php echo "$usermod_width";?>">
                                <jdoc:include type="modules" name="user3" style="rounded" />
                            </div>
                        <?php endif; ?>
                    </div>
                    <div style="clear:left"></div>
                <?php endif; ?>
                <jdoc:include type="message" />
                <jdoc:include type="component" />
            </div>
            <div class="clear"></div>
            <!-- End Center Column -->
        </div>
        <!-- End Main Content Area -->

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    html so far...
    PHP Code:
    Sorry, we can't execute your PHP code to generate the corresponding html. Post your parsed html code(taken from browser's view source option) along with DOCTYPE. Or a link would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for replying! It doesnt really need parsing to see what the layout is - the IF statements just check if the area is in use (IE a block is active) and display the div or not. For this example assume everything IS active and so all the JDoc:include statements are in the html.

    All they do is wrap the block in div > div > div > div so you can get smooth corners and a boundary box. This is a simplified version of the end code:

    Code:
    <!-- Begin Main Content Area -->
        <div id="main-section">
            <!-- Begin Left Column -->
                <div id="left-column">
                    <jdoc:include type="modules" name="left" style="rounded" />
                </div>
            <!-- End Left Column -->
            <!-- Begin Right Column -->
                <div id="right-column">
                    <jdoc:include type="modules" name="right" style="rounded" />
                </div>
            <!-- End Right Column -->
            <!-- Begin Center Column -->
            <div id="center-column">
                      <div id="usermodules" class="spacer33">
                            <div id="block33">
                                <jdoc:include type="modules" name="user1" style="rounded" />
                            </div>
                            <div id="block<?php echo "33">
                                <jdoc:include type="modules" name="user2" style="rounded" />
                            </div>
                            <div id="block33">
                                <jdoc:include type="modules" name="user3" style="rounded" />
                            </div>
                    </div>
                    <div style="clear:left"></div> <!-- PROBLEM HERE-->
                <jdoc:include type="message" />
                <jdoc:include type="component" />
            </div>
            <div class="clear"></div>
            <!-- End Center Column -->
        </div>
        <!-- End Main Content Area -->
    The real issue i'm having is that the U1/U2/U3 blocks are all float:left, just like the left column, so that in order to get the <jdo:include type "message"> to display below the u1/u2/u3 you have to clear:left.

    Which pushes <jdo:include type "message"> below the level of any content in the left column rather than just pushing it below u1/u2/u3.




    Thanks for any help

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    This is not what I asked. Please read my post completely. Anyway, the following would help you to have a start
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>3 Columns</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">html {height:100%;}
    body {
    margin:0; padding:0; height:100%;
    background:#ffffff url(http://www.bonrouge.com/bg.gif) top right repeat-y;
    font-family:arial, serif;
    }
    #wrap {
    background:url(http://www.bonrouge.com/bg.gif) top left repeat-y;
    min-height:100%;
    position:relative;
    }
    * html #wrap {height:100%}
    
    p {margin:5px; padding:0;}
    h1 {
    position:relative;
    line-height:80px;
    margin:0; padding-left:20px;
    }
    #left {
    float:left;
    width:200px;
    text-align:center;
    }
    #main {
    position:relative;
    margin-left:200px;
    }
    #right {
    float:right;
    width:200px;
    text-align:center;
    }
    #content {
    padding:5px;
    margin-right:200px;
    text-align:left;
    }
    #inner-wrap {
    padding-bottom:80px;
    }
    #inner-wrap:after {
    content:" ";
    display:block;
    clear:both;
    }
    #footer {
    position:absolute;
    bottom:0;
    height:80px;
    background-color: #333333;
    width:100%;
    color:#FF00FF;
    text-align:center;
    }
    #footer p {
    margin:0;
    font-size:1.5em;
    text-align:center;
    }
    ul.columns{
    overflow:auto;
    }
    ul.columns li{
    float:left;
    height:50px;
    width: 25%;
    margin:0 2%;
    background:#999;
    list-style:none;
    }
    div.middle-content{
    height:100px;
    background:#999;
    margin:10px;
    }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    #content,
    #main,
    #inner-wrap,
    #wrap {
    zoom:1;
    }
    </style>
    <![endif]-->
    
    </head>
    
    <body>
    
    <div id="wrap">
    <div id="inner-wrap">
    <div id="left">left</div>
      <div id="main"> 
        <div id="right">right</div>
        <div id="content">
    		<ul class="columns">
    			<li>A</li>
    			<li>B</li>
    			<li>C</li>
    		</ul>
    		<div class="middle-content"></div>
    		<ul class="columns">
    			<li>A</li>
    			<li>B</li>
    			<li>C</li>
    		</ul>
    	</div>
      </div>
    </div>
    <div id="footer">
    <p>This is a footer</p>
    
    </div>
    </div>
    </body>
    </html>
    (I've modified http://www.bonrouge.com/3c-hf-fluid.php?nc)
    Last edited by abduraooft; 11-29-2008 at 02:38 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hehe sorry - it's not live, so there is no link at present, and the doctype is XHTML 1.0 Transitional.

    As for your solution, I think that would work! But will that validate properly? I've not heard of people floating <ul> and <li> before! Ingenious. It seems quite a hack around, I take it there is no way of doing this with layout divs.

    Another quick question - which would be preferable - using <ul> or using a <table>? Both would seem to be viable options here.

    Thanks for the help, it's an interesting work around!

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Another quick question - which would be preferable - using <ul> or using a <table>? Both would seem to be viable options here.
    No. tables are meant for displaying tabular data, and not for making page layout.
    See "Why tables for layout is stupid:?"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Apr 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And a "unordered list" is?!

    It seems to me both are hacks of HTML tags performing operations neither was strictly intended for. I hate sites which are layed out in tables. I deal with a lot of PHPBB3 themes, which all seem table based, and changing things is a pain in the ***. The link you posted stated SEO, Theming and Load times as probably the 3 main arguments against using tables.

    However, if used judiciously they still have a function, and it would seem appropriate in this case surely. SEO would not be affected, as there would be no nested tables, merely 1. Theming is not a problem, as this IS the theme for the site, and load times seems a weird argument anyway tbh...

    Saying that, I prefer the <li> option, i'll just play with the CSS validators to make sure it's all Kosher.


  •  

    Posting Permissions

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