#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    49
    Rep Power
    10

    Question Positioning went all wonky after adding content to existing DIV


    Hi,
    This is the current working-copy of my project:
    Animal Emergency Clinic of McLean County, Illinois
    and this is its style sheet:
    http://www.colliope.com/Practice/style.css

    Everything was rendering as it should on each of the four devices I am able to actually test it on until
    I added more than one line of text to the white DIV reserved for main content. Then it all went wonky.
    This is how it looks on the four different devices now, all in the most current version of Firefox:

    Desktop_1280x1024.jpg
    Laptop_1366x768.jpg
    GalaxyS4_1080x1920.png
    NookHD_1280x1920.png

    The laptop version - that is how things are supposed to look, with the white content DIV flush against
    the right side of the red DIV and the bottom of the header#2, and with the blue DIV extending to the
    bottom of the viewing screen so no gray body is showing. And that's how it looked on all four devices
    until I added more than one line of text to the white content DIV. Then the white DIV jumped itself down to be
    vertically between the red & blue divs on both mobile devices (while staying proper on the two computers),
    and the gray body is showing at bottom of the viewing screen on the desktop computer and the mobile phone.

    Ackkk! Everything was going so well (and validating) until now. Help please?
    Thankyou!
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,464
    Rep Power
    70
    Instead of floating your DIVs, have you tried to display them via inline or inline-block at all?
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  4. #3
  5. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Ezmerelda3,

    check out the attachment to see how I would code your page.

    As you will see, there is definitely no javascript for your links.

    coothead
    Attached Files
    Last edited by coothead; May 22nd, 2016 at 07:56 PM. Reason: tpynig eorrr
    ~ the original bald headed old fart ~
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    49
    Rep Power
    10
    Instead of floating your DIVs, have you tried to display them via inline or inline-block at all?
    No but I've been reading about that today. I was being optimistic that a meager three divs (inside one
    main one) would be an easy enough thing for me to manage without messing with the default display type.
    That is something that is certainly on the table to try now, though.

    check out the attachment to how I would code your page.
    As you will see, there is definitely no javascript for your links.
    coothead, that looks great! I love the shadow effect you put around the content and the gradient shadow
    effect on hover over the menu items. And you even worked in my favicon, and the logo at top of menu which was next on my list.
    Here's how it looks on my four devices:
    Desktop_1280x1024.jpg
    Laptop_1366x768.jpg
    NookHD_1280x1920.png
    GalaxyS4_1080x1920a.png
    GalaxyS4_1080x1920b.jpg
    It gets a bit wonky on the mobile phone as you can see but you have certainly given me a lot to work
    with here, thankyou!

    For what it's worth, I did manage to get both the blue div and the yellow container div to stretch to
    the bottom of the viewing screen by adding
    Code:
    height: 100%;
    to the container and
    Code:
    height: 100vh;
    to the blue div. That's working flawlessly on all four devices regardless of zoom level or window size.
    Animal Emergency Clinic of McLean County, Illinois
    That little achievement, learning that "VH" (viewport height) exists, made me very happy as I didn't want
    any void there on the left of the page, I wanted the blue going all the way down always like a permanent screen border.
    That accomplished I can move back to the problem of the white content div jumping down on the
    mobile devices. You have both given me much to think about and try out but I can't think about this
    any more today or my head might explode.
    I'll be back..

    P.S. - In case I didn't make it clear before, I will definitely be switching out the js menu for a css one
    but I want to get this positioning framework done first before going back to actual content. .
    Last edited by Ezmerelda3; May 22nd, 2016 at 08:59 PM. Reason: P.S.
  8. #5
  9. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there
    Ezmerelda3,

    please note that the code that I provided is for the basic layout.

    I will add some "Media Queries" to it, if you like, which will make
    it fully responsive.


    Also note that I put the blue background colour for the side bar
    in the wrong place. I will correct that.

    coothead
    Last edited by coothead; May 22nd, 2016 at 09:12 PM.
    ~ the original bald headed old fart ~
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Ezmerelda3,


    check out the revised code in the attachment.


    coothead
    Attached Files
    Last edited by coothead; May 23rd, 2016 at 05:51 PM.
    ~ the original bald headed old fart ~
  12. #7
  13. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,464
    Rep Power
    70
    Just a quick toss-together in some free time. How does this one work out with your devices? I was also wondering if you wanted the white box to expand all the way to the right by default, or only if the content did.

    Demo: Positioning went all wonky after adding content to existing DIV
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    49
    Rep Power
    10
    I was also wondering if you wanted the white box to expand all the way to the right by default, or only if the content did.
    Well, I am not sure? Right now, the container background is yellow only so I can visually discern between it, the body background (gray), and the content div (white) while building the page.
    Once done the container background will be white, same as the content div, so I am not sure what difference it would make if the content div expands to the right & bottom edges of the viewing screen, or just to the edges of the content because I think either way it would look the same visually?
    I suppose having it expand to the screen edges or just to the edges of the content depends on which way will cause the least amount of complications positioning the contents within it. What do you think?

    Thankyou both for the new mock-ups! I will be back tonight when I have more time to study them and check them out on the varying devices.
  16. #9
  17. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,464
    Rep Power
    70
    If it's ok to expand the full width just like the grey header above it does, it will play a bit more safe keeping the #content DIV a block element instead of changing it to an inline-block. Text wrapping won't be any different with the current settings since it currently expands the full width either way, if needed, since no width or max-width has been set on the white #content DIV.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    49
    Rep Power
    10

    Thumbs up


    Finally got time to get back to my project and thought you both might be curious to see how your mock-ups rendered on my different devices. They're shown at normal 100% zoom level in Firefox . They look good but there were some variances from device to device. The meta "media queries"
    Code:
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    to make it more responsive to the viewport is interesting but I didn't like how it stacked things up on the mobile phone.

    coothead
    http://www.colliope.com/Practice/coo..._1280x1024.jpg
    http://www.colliope.com/Practice/coo...op_136x768.jpg
    http://www.colliope.com/Practice/coo..._1920x1080.jpg
    http://www.colliope.com/Practice/coo..._1920x1080.jpg
    http://www.colliope.com/Practice/coo..._1920x1280.jpg
    http://www.colliope.com/Practice/coo..._1920x1280.jpg

    http://www.colliope.com/Practice/tri...ng/triple.html
    http://www.colliope.com/Practice/tri..._1280x1024.jpg
    http://www.colliope.com/Practice/tri...p_1366x768.jpg
    http://www.colliope.com/Practice/tri..._1920x1080.jpg
    http://www.colliope.com/Practice/tri..._1920x1080.jpg
    http://www.colliope.com/Practice/tri..._1920x1280.jpg
    http://www.colliope.com/Practice/tri..._1920x1280.jpg

    I played around with both your sources and tried to incorporate things into my source but couldn't get things to work satisfactorily. Then I had a lightbulb moment and said to self "Duh! Just use absolute positioning!". So I scrapped the container DIV and absolutely positioned everything else and bingo - the page renders consistently across all the devices and browsers I've tried it on. Nothing ever jumps around or changes size so I'm confident now that it won't get wonky no matter what people are viewing it on. And it still validates with no errors or warnings so woohoo!
    Here's what it looks like now: http://www.colliope.com/Practice/practice.html
    and here's the style sheet: http://www.colliope.com/Practice/style.css
    (I did swap out the js menu for the css one, thank you very much for showing me that was much simpler than I thought it would be.)
    I think I am ready now to start formatting the actual content for each page now that the framework is done. Thankyou both for being around to help, I'm sure I'll have more questions as I go.
  20. #11
  21. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,464
    Rep Power
    70
    Do you want your blue BBB container at left to end? Or would you rather it extend with the page? With both your and my current CSS, it currently has a static height. Yours simply defines a solid height. Mine defines the remainder of the window(100vh minus the above content's spacing), restricted with a min-height as well so it doesn't get TOO small, anymore.

    I simply added min-height so the left blue box is guaranteed to be no smaller than the current content.
    I don't suppose you'd be willing to check that little alteration on your devices? I didn't think about the images overflowing at first. Figured they'd be the stop for shrinking the box. ^_^

    Shorter page: Positioning went all wonky after adding content to existing DIV
    Longer page: Positioning went all wonky after adding content to existing DIV

    EDIT: Made a few minor edits, and actually deleted a handful of lines, but this will continue the BBB blue background to match the content, and not end. The catch here would be if the content item is allowed to be short, you will see blue below it. There are a couple was to solve this, but I need to know if the content item has to be inline, or can remain stretching to the right edge of the screen.
    Shorter blue continue: Positioning went all wonky after adding content to existing DIV
    Longer blue continue: Positioning went all wonky after adding content to existing DIV(Ran to work. Posted wrong.)

    EDIT2: Fixed my examples. Sorry about that. Also added some notes in the Shorter example to define/understand the altered layout.

    Comments on this post

    • Ezmerelda3 agrees
    Last edited by Triple_Nothing; May 29th, 2016 at 07:58 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    49
    Rep Power
    10
    I don't suppose you'd be willing to check that little alteration on your devices?
    Of course, but your links aren't loading for me this morning? I just get about:blank in the address bar and "waiting......" in the status bar.

    Do you want your blue BBB container at left to end? Or would you rather it extend with the page?
    I want the blue to always extend to the bottom of the viewing screen, which it does, but this is the problem: http://www.colliope.com/Practice/Scr...pagescroll.jpg
    It's like there's invisible content lengthening the page. I am thinking that this

    Mine defines the remainder of the window(100vh minus the above content's spacing),
    is probably the fix for that but I'll have to wait until i can view your version to see.
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    49
    Rep Power
    10
    I tried both
    Code:
    height: calc(100vh - 515px);
    and
    Code:
    height: calc(100% - 515px);
    for the blue div instead of just "height: 100vh;" and that did get rid of the extra page scroll down, but it caused the blue container to break up on the laptop and the two mobile devices when in landscape mode, all of which have greater widths than heights. Hmmm.
    http://www.colliope.com/Practice/Scr...ts/calcfix.jpg
    Last edited by Ezmerelda3; May 29th, 2016 at 01:20 PM. Reason: added screenshot
  26. #14
  27. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Ezmerelda3,

    "...but I didn't like how it stacked things up on the mobile phone."
    You did not say what it actually was in the stacking that offended you.

    If it was the menu, then that can be condensed as the attachment will show.

    Also note that the point at which the stacking starts is arbitrary and can be
    changed to suit specific requirements.

    coothead
    Attached Files
    ~ the original bald headed old fart ~
  28. #15
  29. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,464
    Rep Power
    70
    Are the 2 blues used intended to be the same blue? If yes, then the only 4 items to hold a color are:
    Body: blue
    Nav: red
    Right upper: grey
    Right lower: white

    Edit: I'm not sure when I'll be at a computer, so not sure if this is the way my final was written, but it just clicked. Only takes 2 things to pull this off.
    Making the body's background will make the left blue always continue.
    Using @media(max-height: top&left content) define the yellow box at 100%, else define min-hight of 100vh minus the items above it so it goes no less than the view.
    Last edited by Triple_Nothing; May 30th, 2016 at 06:03 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

IMN logo majestic logo threadwatch logo seochat tools logo