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:look-like-this.jpg
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)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
Rowby GorenAuthor 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.
#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.


Rowby GorenAuthor Commented:

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.



Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

RobOwner (Aidellio)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:
RobOwner (Aidellio)Commented:
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.
Rowby GorenAuthor 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.)

RobOwner (Aidellio)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 :)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
WIll do.  Let's see what happens..   Will do it in the morning.  Should be an interesting experiment.
Rowby GorenAuthor Commented:
Thanks Rob,

For the reminder to take advantage of the framework!

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.