SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIVs move as browser window is extended

    Hi everybody,

    New to the forum and relatively new to HTML and CSS, so signed up cause I'm having a bit of a problem with some DIVs moving around as the browser window is extended or made smaller. Can't post too much of the code as this is for a class assignment but should hopefully be enough to give you an idea of the problem.


    div#logo {
    width: 205px;
    height: 100px;
    margin-left: 180px;
    padding: 0px;
    float: left;
    }

    div#logoheader {
    background-color: #003366;
    float: right;
    margin-right: 183px;
    height: 98px;
    width: 695px;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    font-size: 60px;
    vertical-align: text-bottom;
    }
    These two elements appear next to each other, but the 'logoheader' div basically slides underneath the 'logo' div when the window is made smaller, and slides too far to the right of the 'logo' div when the window is extended to full size. Is there any way to fix these divs in one place or perhaps combine them into one div?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi ThorntonStuart. Welcome to the forums.

    Normally, you'll want to place these floated elements inside a container that has a set width (or perhaps instead a max-width and min-width) and is perhaps centered on the screen. Otherwise, elements that are just floated and scattered all over the screen will move around all over the place depending on the width of the browser window etc.

    Make sure to post your HTML too when asking layout questions, because CSS on its own is out of context.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh okay. Yeah for this layout I didn't include a container for the entire layout, so can I create a container solely for these elements to keep them in the right position or are you referring to a container for the entire layout? I'll try out the max/min-widths first though, thanks!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ThorntonStuart View Post
    can I create a container solely for these elements to keep them in the right position or are you referring to a container for the entire layout?
    You can do either ... and it's also quite normal to do both.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh great, I'll give it a shot! Thanks!


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
  •