Link to home
Start Free TrialLog in
Avatar of Rowby Goren
Rowby GorenFlag for United States of America

asked on

Moving a div under another div


Please look at this page: My Granddad button

The "Buy My Grandad's products" graphic needs to be under the row of icons, instead of the way it currently is.

Do I need a div float?  And if so how do I do it in this case?

Here's the mockup of how I would like it to look:User generated image
Avatar of Rob
Flag of Australia image

You do need float: left.  Make all those <div> tags in the "utils" container to float: left

then on the JakeZ element, add width: 51%.  it will push it to the next line
Avatar of Rowby Goren


Hi Rob,

Thanks for helping again.

The graphic is now under the icons, and it looks good on desktop.

On tablet landscape the group is a bit too much to the left.  I assume I could fix that by making the percent maybe 30 percent.

However on Tablet Portrait there are issues and on cell too.

I assume it's caused by my negative margin.
#pageheader .utils {
    right: 30px;
    height: 44px;
    line-height: 40px;
    font-size: 14px;
    margin-top: -75px;
    float: left;

Open in new window

Any suggestions for a fix -- handing the negative margin better?  I'd try some things on my own, but I am sure your fix would be the best practices method.  So I will hold off... to await your improvement.



Morning update.

Desktop looks okay, except I guess I need to use a negative margin to get the right group higher. (Is using negative margins asking for trouble -- especially in responsive world?)

Tablet looks fine on landscape.     On tablet the right group moves too much to the center.  I assume that can be fixed by making the percentage, maybe 30 percent?

Cell.  Problems  portrait and landscape. .  Not sure how to fix them.

I have a  suspicion that the democratic party store logo maybe needs to be in the same overall div as the right area.  (or visa versa).  Maybe that's the overall problem -- with the resulting issues showing up on cell devices.



Have you looked at incorporating a css library to help with the layout?  I use bootstrap and it straight out answers these kind of questions for you:
To see what i mean:,output

just drag the divider between the code and the output to change the width and see how responsive it is.
Hi Rob,

Can I use bootstrap just for this header area.  The rest of the site is working fine.

I assume as long as the css in bootstrap is not the same "tags" as any of the default css it should not interfere with the other pagses.

I'm using a pre-built shopify template that contains php and html, etc.  The header area is generally it's own "snippet' so I would want to only have it apply to the header (which is the same as all the interior headers, of course.)

Avatar of Rob
Flag of Australia image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
WIll do.  Let's see what happens..   Will do it in the morning.  Should be an interesting experiment.
Thanks Rob,

For the reminder to take advantage of the framework!