SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why is my content riding up?

    I know I've done something wrong here, but I have 2 problems and I can't see what I've done that's causing them. Any help would be appreciated.

    I'm working on a liquid site with a left-floated sidebar, a right-floated sidebar and a larger central div of undefined width that can expand to fill the space between the two. In that central div, I have worked out how to position 2 boxes of content side-by side.

    The first problem I'm having is this: unless I make those boxes wide enough to fill the majority of the width of the central div, any content that I want to put further down the page after the boxes keeps riding up the page to fill the empty space alongside or between the boxes. I thought wrapping the stuff lower down the page in a div might help, but it didn't.

    The second problem I'm having is how to get these two content boxes to be centre-justified within the div without using % margins to do the job.

    Here's the css from the central div that is supposed to control things -

    #central-area {
    color: black;
    background-color: white;
    text-align: justify;
    line-height: 1.5em;
    margin: 0;
    padding: 0.5ex 22em 1em 22em;
    }

    /* #boxwrapper is used to contain the 2 boxes*/

    #boxwrapper {
    width: 100%;
    }
    /*the code to display 2 content boxes */
    #central-area .twoboxleftbox {
    float: left;
    margin: 1em 5% 2.5em 2.5%;
    padding: 0;
    width: 20%;
    height: 20em;
    border: 1px solid grey;
    }

    #central-area .twoboxrightbox {
    float: right;
    margin: 1em 2.5% 2.5em 5%;
    padding: 0;
    width: 20%;
    height: 20em;
    border: 1px solid grey;
    }

    /*the div to contain any text/images that are meant to follow lower down the page and stay below the content boxes */
    #central-area .afterboxes {
    margin: 0;
    padding: 0;
    }


    and here's the html from the page...
    <div id="central-area"
    <p> Sample text sample text sample text sample text sample text sample text sample text sample text sample text</p>
    <div id="boxwrapper">
    <span class="twoboxleftbox">left box</span>
    <span class="twoboxrightbox">right box</span>
    </div>

    <span class="afterboxes">
    <p><img src="img/testimages1.gif" alt="" width="300" height="70" /></p>
    <p><a href="">link goes here</a></p></span>
    </div>


    Please forgive me if the code isn't displayed in those little scrolling windows that other people use on here - I don't know how to do that yet.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,


    The first problem i found that is your first div is not closed.
    Below is your code

    <div id="central-area"

    Corrected one
    <div id="central-area">

    Below is the link where you learn how to create columns with Div
    http://www.communitymx.com/content/a....cfm?cid=F41AE


    Hope this helps,
    Cheers,
    Maneet Puri
    Lexolution IT Services

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a very useful article - thanks!

  4. #4
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's really good resource I also face the same prob in newly developed website and after reading it I able to fix it here in my logo designing page.
    Thanks mate for sharing helpful information.


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
  •