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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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.
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.


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.
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

738 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