Moving a div under another div

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hello

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:look-like-this.jpg
Thanks,
Rowby
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
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

Author

Commented:
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.
media="all"
#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.

Thanks,

Rowby

Author

Commented:
Hi

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.

!!!

Best,

Rowby
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
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:

http://getbootstrap.com
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
To see what i mean: http://jsbin.com/nucuqufipa/edit?html,output

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

Author

Commented:
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.)

...Rowby
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
yeah of course.  just go ahead and use it just for the header area.  I'd just hate to see you try and reinvent the wheel, so to speak :)

Author

Commented:
WIll do.  Let's see what happens..   Will do it in the morning.  Should be an interesting experiment.

Author

Commented:
Thanks Rob,

For the reminder to take advantage of the framework!

Rowby

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial