SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Float question

  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float question

    I'm building a responsive site http://www.ashleykirk.ca/AB4/

    I don't understand why my gray sidebar box is not sitting directly under the yellow sidebar box. It seems to be lined up with the top of my last "home-feature". I could probably fix this if I wrap all of my "home-feature" boxes in a div, but I'm not sure that's the right way to do it. What is the best way to do this?

    Also, I don't want to change the HTML order because it is the order I want when stacked for mobile.

    Thanks!

    Ak

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You should put it in two columns, so that they are separated. By then, your sidebar will only be on the right side and content will be on the left. If you needed more help, let me know. Hope that helps

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    A floated item can't sit higher that the elements it follows by floating alone.

    You could pull it up with a negative margin, but I'm wary of doing that in a layout.

    Code:
    .gray {
        margin-top: -60px;
    }
    The ideal is to have the sidebar contents grouped in their own container, of course.

    There are better CSS layout tools on the way, but they aren't ready yet, unfortunately.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    With the understanding that you do not want to alter the HTML, there are a couple of possible choices available.
    (1) Assign a negative .sidebar.gray {margin-top:-60px} to lift the gray box close to the yellow box. They will still spread as the page narrows, but they will always be closer than they are now. You will have to remove that neg margin with the media query changes the layout for mobile.
    (2) Assign .content > div {position:relative}. Then assign .sidebar.gray {position:absolute;top:290px;right:0;}. Spacing between the boxes will be consistent. The bottom of the .sidebar.gray box will flow into the gray footer at wide widths, but not objectionably so. The absolute positioning must be disabled by the media query when the layout changes for mobiles.

  5. #5
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome advice. Thank you!


Tags for this Thread

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
  •