Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

floats giving me problem i think

Posted on 2012-03-22
8
Medium Priority
?
239 Views
Last Modified: 2013-11-19
Hello,

Would be grateful for any advice.

 http://tinyurl.com/86mwtqn

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;
padding-left:30px;">
          <div>
            <h1>Blasting Shot London</h1>
          </div>
          <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>
        <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>
      </div>
    </div>



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



cheers
0
Comment
Question by:dizzynono
  • 4
  • 4
8 Comments
 
LVL 30

Expert Comment

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

Author Comment

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

Expert Comment

by:LZ1
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:
http://www.getskeleton.com/

Resize your browser and watch how the site responds to the different resolution.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:dizzynono
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.
0
 
LVL 30

Expert Comment

by:LZ1
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
0
 

Author Comment

by:dizzynono
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.
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 1500 total points
ID: 37753843
Did you try reducing the widths?
0
 

Author Closing Comment

by:dizzynono
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
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

886 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