floats giving me problem i think

Posted on 2012-03-22
Last Modified: 2013-11-19

Would be grateful for any advice.

this looks fine in both ie and ff but when its viewed on the latest android
the masterhead area is all falling apart.

this is the masterhead

    <div class="masthead" >
      <div style="padding-top: 12px; ">
        <div style="float:left; width:460px; padding-top:30px;
            <h1>Blasting Shot London</h1>
          <div style="font-size:12px;  text-shadow: 2px 2px 3px
#e5e5e5;">Shot Blasting Grit using Shot Blasting Machines by the Shot
Blasting Company</div>
        <div style="float:left; width:420px;"> <img
src="css/img/sandblasting/call-shot-blasting.png" alt="Shot Blasting London"
title="Sand Blasting London" style=" margin-left:240px;" /> </div>

i believe it could be the  float that is causing my misery. can anyone
advise how to correct this...

Question by:dizzynono
  • 4
  • 4
LVL 30

Expert Comment

ID: 37752558
Are you using any type of responsive CSS or media queries?

Author Comment

ID: 37753024
what do you mean by responsive CSS or media queries
LVL 30

Expert Comment

ID: 37753044
That kind of answered my question.  

For mobile devices and tablets(or different screen resolutions) you really should be using media queries in order to style your site according to the browser resolution.

Take a look here:

Resize your browser and watch how the site responds to the different resolution.

Author Comment

ID: 37753358
ok but i am aware that it is the floats causing the problem. as i can do with out it and it is fine. but i want the content that is inside the masterhead as is.
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

LVL 30

Expert Comment

ID: 37753774
It may not necessarily be the floats.  Floats will expand to the width of the parent unless otherwise specified, like you have here.

Try playing with the widths of the 2 divs inside masterhead

Author Comment

ID: 37753824
Floats will expand to the width of the parent unless otherwise specified, like you have here.

of course but i need to divs to be inside the parent thus set a width for each.
LVL 30

Accepted Solution

LZ1 earned 500 total points
ID: 37753843
Did you try reducing the widths?

Author Closing Comment

ID: 37815506
It was many different problems, sorry to get back so late to you. any way i will just rebuild the page again from scratch. sometimes that is easier lol

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now