Moving a div under another div

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

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;

Select allOpen 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

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

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

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.

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

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!

Rowby