SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: CSS box problem

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS box problem

    I'm having a problem with my page in that there are two divs but the second div shifts below the first. The first div is floated left and the second div is floated right but I can't understand why they aren't appearing next to each other.

    Can anyone suggest why i'm having this problem?

    My CSS for the divs are as follows:

    #content2 {
    margin:0 210px 0 0px;
    background:url(/images/content.jpg) top left no-repeat;
    padding:20px 0 0 20px;
    float:left;
    }

    #sidebarright {
    width:170px;
    float:right;
    padding:10px 0 0 20px;
    background:url(/images/sidebarright.jpg) top left no-repeat;
    }

    My second question is probably a bit more complicated. What I would like to do is have the site as 3 divs next to each other, but on some pages the left div dissappears so I would like the middle div to stretch to cover the gap that the first div has left. What would be the best way to go about this? I've got it into 3 divs fine but when I remove the first div I can't figure our which CSS to change to get the middle div to widen.

    Thanks for any help, I appreciate it.

    Justin.

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    When having float problems, it's best to check these 3 first:
    - Did you use clear:both; later to return the doc to its normal flow?
    - Do the combined widths of the floated elements exceed their container element?
    - Am I testing in IE?

    If IE, then be sure to ck. w/ f-fox, opera or anything that'll render
    your code w/out trying to 'fix' it...some problems can occur w/ IE's
    method of formulating the widths of elements - or changes in the
    padding for floated stuff. [See Paul's and others advice for these ;-)]

    For your next problem, introduce a div that'll float next to the first one
    but is the total width of the ones that used to be there...just use this
    configuration on any pages you need 2 col's instead of 3.

    Hope it helps a bit,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide the full HTML and CSS source code? From what I'm seeing it looks like your math is off a bit. Perhaps another pair of eyeballs (like mine) might be able to get to the heart of the matter.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan, sure, the CSS and html is below, thanks for your help El.


    body {
    font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
    word-spacing:2px;
    color:#444;
    margin:20px;
    background:url(http://www.qwikezine.com/themes/blue...mages/body.jpg) #f6f6f6;
    }

    * {
    margin:0;
    padding:0;

    }

    #main {
    /* padding in px not ex because IE messes up 100% width tables otherwise */
    padding: 10px 0;
    }

    #wrapper {
    background:#fff;
    border:3px solid #f1f1f1;
    max-width:1200px;
    width:expression(this.width > 320 ? "320px" : this.width);
    min-width:760px;
    margin:0 auto;
    }

    * html #wrapper
    {
    w\idth: expression(document.documentElement.clientWidth > 1200 ? "1200px" : "auto");
    }

    #innerwrapper {
    margin:1px;
    background:url(http://www.qwikezine.com/themes/blue...nerwrapper.jpg) top repeat-x;
    padding:20px;
    }

    #header input {
    width:150px;
    padding:5px;
    background:#fff;
    border:2px solid #f6f6f6;
    font:150% Arial;
    color:#999;
    }

    #header input:hover {
    border:2px solid #ccc;
    }

    #header input:focus {
    border:2px solid #79B5D6;
    color:#555;
    }

    #header form {
    padding:27px 25px 20px 25px;
    float:right;
    background:#fff;
    width:160px;
    margin:-20px -20px 0 0 !important;
    margin:-20px -10px 0 0;
    border:none;
    }

    #header h1 {
    float:left;
    font:250% Arial;
    color:#333;
    padding:5px 20px 5px 5px;
    border-right:1px solid #ccc;
    margin:0 20px 0 0;
    }

    #header h1 a {
    color:#333;
    text-decoration:none;
    border-bottom:2px solid #f6f6f6;
    }

    #header h1 a:hover {
    color:#111;
    border-bottom:2px solid #79B5D6;
    }

    #header h2 {
    font:150% Arial;
    color:#666;
    padding:16px 0 0 0;
    border:none;
    }

    #header h2 a {
    color:#444;
    text-decoration:none;
    border-bottom:2px solid #f6f6f6;
    }

    #header h2 a:hover {
    border-bottom:2px solid #79B5D6;
    }

    #header #nav {
    clear:both;
    background:url(http://www.qwikezine.com/themes/blue...images/nav.jpg) top repeat-x #4F9EC9;
    border-bottom:2px solid #4F9EC9;
    border-top:2px solid #388CBA;
    border-left:2px solid #388CBA;
    border-right:2px solid #388CBA;
    padding:10px 10px 10px 0 !important;
    padding:4px 10px 10px 0;
    }

    #header a em {
    font-style:normal;
    text-decoration:underline;
    }

    #header #nav a {
    color:#fff;
    font:140% Trebuchet MS;
    text-decoration:none;
    padding:10px;
    }

    #header #nav a:hover {
    background:#4F9EC9;
    }

    #header #nav a.active {
    background:#4F9EC9;
    }

    #header #nav li {
    display:inline;
    list-style:none;
    margin:0 1px 0 0;
    }

    #header #subnav {
    background:#4F9EC9;
    padding:5px 7px 7px 7px;
    font:90% Verdana;
    color:#DEEDF5;
    border-bottom:2px solid #388CBA;
    border-left:2px solid #388CBA;
    border-right:2px solid #388CBA;
    }

    #header #subnav li {
    list-style:none;
    display:inline;
    }

    #header #subnav a {
    color:#DEEDF5;
    text-decoration:none;
    font:100% Verdana;
    padding:5px;
    border-bottom:2px solid #4F9EC9;
    }

    #header #subnav a:hover {
    border-bottom:2px solid #388CBA;
    color:#fff;
    }

    #header #subnav a.active {
    border-bottom:2px solid #388CBA;
    color:#fff;
    }


    #sidebar {
    background:#333;
    width:200px;
    padding:10px 20px 20px 20px;
    float:left;
    color:#666;
    border-top:2px solid #000;
    border-bottom:10px solid #000;
    }

    #sidebar h2 {
    font:160% Arial;
    color:#999;
    margin:10px 0 10px 0;
    background:url(http://www.qwikezine.com/themes/blue.../sidebarh2.jpg) right no-repeat;
    border:none;
    }

    #sidebar h3 {
    color:#FF8040;
    font:90% Verdana;
    font-weight:bold;
    letter-spacing:2px;
    }

    #sidebar p {
    margin:15px 0;
    }

    #sidebar p.news {
    background:#323232;
    }

    #sidebar p.news a.more {
    color:#ccc;
    display:block;
    text-align:right;
    font:80% Verdana;
    text-transform:uppercase;
    letter-spacing:1px;
    text-decoration:none;
    padding:10px 0;
    }

    #sidebar p.news a:hover {
    color:#98D158;
    }

    #sidebar .subnav {
    border-top:1px solid #2C2C2C;
    }

    #sidebar .subnav li {
    list-style:none;
    padding:5px;
    border-bottom:1px solid #2C2C2C;
    }

    #sidebar .subnav li a {
    color:#ccc;
    text-decoration:none;
    display:block;
    }

    #sidebar .subnav li a:hover {
    color:#98D158;
    }

    #sidebar .subnav li a b {
    float:right;
    display:none;
    color:#666;
    }

    #sidebar .subnav li a:hover b {
    display:inline;
    }

    #sidebar input {
    padding:4px;
    background:#2c2c2c;
    border:1px solid #222222;
    color:#ccc;
    font:90% Verdana;
    width:190px;
    }

    #sidebarright {
    width:170px;
    float:right;
    padding:10px 0 0 20px;
    background:url(http://www.qwikezine.com/themes/blue...debarright.jpg) top left no-repeat;
    }

    #sidebarright p {
    font:90% Verdana;
    color:#777;
    line-height:20px;
    margin:10px 0;
    }

    #sidebarright h2 {
    font:140% Arial;
    color:#333;
    margin:10px 0;
    border:none;
    }

    #sidebarright ul {
    margin:10px 0 10px 15px;
    font:90% Verdana;
    }

    #sidebarright ul li {
    margin:5px 0;
    }

    #sidebarright a {
    border-bottom:1px dotted #eee;
    color:#444;
    text-decoration:none;
    }

    #sidebarright a:hover {
    border-bottom:1px solid #ccc;
    }


    #content2 {
    margin:0 210px 0 0px;
    background:url(http://www.qwikezine.com/themes/blue...es/content.jpg) top left no-repeat;
    padding:20px 0 0 20px;
    float:left;
    }

    #contentnorightbar {
    margin:0 0 0 240px;
    background:url(http://www.qwikezine.com/themes/blue...es/content.jpg) top left no-repeat;
    padding:20px 0 0 20px;
    }

    p {
    margin:15px 0;
    line-height:22px;
    }

    h2 {
    font:170% Arial;
    color:#79B933;
    border-bottom:2px solid #f6f6f6;
    margin: 20px 0 0 0;
    }

    h2 a {
    color:#79B933;
    text-decoration:none;
    }

    h2 a:hover {
    color:#5F9128;
    }

    #main h1 {
    font:190% Arial;
    color:#003366;
    }


    #footer {
    clear:both;
    border-top:1px solid #eee;
    padding:10px;
    margin:30px 0 0;
    }

    a {
    color:#222;
    }

    a:hover {
    text-decoration:none;
    }

    h3 {
    font:140% Trebuchet MS;
    margin:10px 0;
    }

    #content {
    width: 100%;
    }

    #tabs ul {
    margin:15px 0;
    line-height:16px;
    padding:0 15px;
    border-bottom:1px solid #eee;
    color:#79B933;
    }

    #content2 ul {
    margin:15px 0;
    line-height:16px;
    padding:0 15px;
    color:#003366;
    }
    #content2 ul span {
    color:#444;
    }
    #contentnorightbar ul {
    margin:15px 0 15px 20px;
    line-height:25px;
    padding:15px 0;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    color:#79B933;
    }
    #contentnorightbar ul span {
    color:#444;
    }

    img {
    padding:1px;
    background:#ccc;
    border:4px solid #f6f6f6;
    }

    form {
    padding:10px;
    border:1px solid #f6f6f6;
    }

    label {
    display:block;
    font-weight:bold;
    color:#444;
    margin:5px 0;

    }
    input {
    width:300px;
    padding:4px;
    border:none;
    border-bottom:1px dotted #ccc;
    font:90% Verdana;
    color:#777;
    }

    textarea {
    width:400px;
    padding:4px;
    font:90% Verdana;
    border:1px solid #eee;
    height:200px;
    display:block;
    color:#777;
    }

    p img {
    float:left;
    margin:0 10px 0 0;
    }

    blockquote p {
    font:160% Georgia;
    color:#aaa;
    padding:0 10% 0 0;
    line-height:30px;
    }

    .submitted {
    color: #999;
    font-size: 0.8em;
    }





    HTML:

    <!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" xml:lang="en">
    <head>
    <title><?php print $head_title ?></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <?php print $head ?>
    <?php print $styles ?>
    <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
    </head>

    <body>

    <div id="wrapper">
    <div id="innerwrapper">

    <div id="header">

    <form action="/" method="post" id="search_block_form">
    <input type="text" maxlength="128" name="edit[search_block_form_keys]" id="edit-search_block_form_keys" size="15" value="Search" title="Enter your search terms and press Enter" class="form-text" />
    <input type="hidden" name="edit[form_id]" id="edit-search-block-form" value="search_block_form" />
    </form>

    <h1><a href="http://www.qwikezine.com" title="QwikEzine Free Article Submission">QwikEzine</a></h1>

    <h2>

    <i>The</i> new generation of article submission

    </h2>

    <ul id="nav">

    <li><a href="index.html" accesskey="3" class="active"><em>H</em>ome</a></li>

    <li><a href="#About"><em>L</em>ogin</a></li>

    <li><a href="#Examples"><em>R</em>egister</a></li>

    <li><a href="twocolumns.html"><em>C</em>ontact</a></li>

    <li><a href="#Intro"><em>B</em>ookmarks</a></li>

    </ul>
    <ul id="subnav">

    <li>Subnav/li>

    <li><a href="index.html" accesskey="3" class="active"><em>L</em>earn About QwikEzine</a></li>

    <li><a href="index.html"><em>F</em>eeds</a></li>

    <li><a href="index.html"><em>U</em>ser Points</a></li>

    <li><a href="index.html"><em>S</em>ubmit Article</a></li>

    </ul>

    </div>

    <div id="content">
    <?php if ($sidebar_left) { ?>
    <div id="sidebar">

    <?php print $sidebar_left ?>

    <h2>Latest News</h2>

    <h3>News Title</h3>

    <p class="news">
    An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here.
    <a href="#" class="more">Read More &raquo;</a>
    </p>

    <h3>News Title</h3>

    <p class="news">
    An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here.
    <a href="#" class="more">Read More &raquo;</a>
    </p>

    <h3>News Title</h3>

    <p class="news">
    An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here.
    <a href="#" class="more">Read More &raquo;</a>
    </p>

    <h2>Sub Navigation</h2>

    <ul class="subnav">

    <li><a href="#"><b>&raquo;</b>Link Here</a></li>

    <li><a href="#"><b>&raquo;</b>Link Here</a></li>

    <li><a href="#"><b>&raquo;</b>Link Here</a></li>

    <li><a href="#"><b>&raquo;</b>Link Here</a></li>

    </ul>

    <h2>Search</h2>

    <input name="" type="text" value="Search" />

    </div>
    <?php } ?>

    <?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
    <div id="content2">

    <div id="main">
    <?php print $breadcrumb ?>
    <h1><?php print $title ?></h1>
    <div class="tabs"><?php print $tabs ?></div>
    <?php print $help ?>
    <?php print $messages ?>
    <?php print $content; ?>
    </div>

    </div>

    <?php if ($sidebar_right) { ?>
    <div id="sidebarright">

    <?php print $sidebar_right ?>

    </div>
    <?php } ?>

    <div id="footer">

    <!-- Please leave this line intact -->
    <p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
    <!-- you can delete below here -->

    All your copyright information here.</p>

    <?php print $footer_message ?>

    </div>

    </div>
    </div>
    </div>

    <?php print $closure ?>
    </body>
    </html>

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

    #content2 {
    margin:0 210px 0 0px;
    background:url(/images/content.jpg) top left no-repeat;
    padding:20px 0 0 20px;
    float:left;
    }

    #sidebarright {
    width:170px;
    float:right;
    padding:10px 0 0 20px;
    background:url(/images/sidebarright.jpg) top left no-repeat;
    }
    The floats are side by side unless you close the screen smaller. When you close the window the the margin-right of 210px will make the right float drop down below when it gets in range.

    You have also floated #content2 without a width which means that if you add content like text it will try to fill 100% of the space along that row and will eventually push the right float down anyway.

    It looks to me as though you shouldn't be floating #content2 anyway and just use a margin-right to keep it clear of the sidebar(the existing margin looks about right). Of course this means that the sidebar html must come before the #content2 html because floats must come first.

    This would be a similar solution to your last question in that you float column left and right and then have the middle column static and kept clear by margins. You would just then change the margins on the center column if the left column was missing etc.

    (There are methods of using three floats and negative margins but I think that will be too complicated at this stage.)

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Paul, that's helped clear up the problems I was having. The template I'm using originally had the 2 sidebars floated before the middle div but I changed it because I wanted the main content to be read first by search engines before the sidebars. I'll leave that for now and concentrate on getting it working properly.

    I've made the changes you suggested but I seem to be having a problem that doesn't seem to make sense. On the index page (qwikezine.com) the middle content shifts below the right sidebar. However, if I click on one of the title links (such as http://www.qwikezine.com/en/node/9) in the middle column the page will load with the content in the correct place. Further down on the page though is a large space where the rest of the content carries on even though it is all in the same div (#content2).

    Why would it being doing this?

    Thanks again,
    Justin

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

    The content is dropped on the home page because you have used "clear" to clear floated elements and clear will clear all previous floated elements including your floated columns.

    In order to contain the clearing of other columns you need to nest an inner float inside your center column div so that it holds all the content. this will confine any clearing to remain within that float.

    Here is a demo that explains and offers the solution I mention.

    http://www.pmob.co.uk/temp/flclear1.htm

    I also notice that you have content in the right column that is much to wide and you need to address those issue as well.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I understand now, thanks for helping. Thanks also for the demo, I appreciate it.


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
  •