Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS image float 2

Status
Not open for further replies.
Cullen411

Cullen411

Programmer
Aug 17, 2005
89
GB
Is there a better way to have the site image top left and then a banner image right. This is what I've come up with

<div>
<img src="images/image1.gif" width="100" height="100" alt="image 1" style="float:left;" />
<img src="images/image2.gif" width="468" height="160" alt="image 2" style="float:right;" />
</div>
 
Sort by date Sort by votes
The only difficulty occurs if the user resizes the window to less than the sum of the two div widths including their margins/paddings. When this happens, the right div will stack underneath the left div, totally blowing your format, assuming you don't have a width specified for the parent container.

As much as I try to avoid absolute positioning, this is one of the places to use it.

You might also put the two images into a (shudder and gag) table.

Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
Cullen-

I agree with mike. I whipped up a little example to help you on your way.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<title></title>
<body>
<div id="header" style="margin-left:10px; margin-right:10px; width:auto; min-width:200; background-color:#00f;">
<div id="logo" style="position:absolute; left:10px; top:10px; z-index:3; width:100px; height:100px; background-color:#f00;">&nbsp;</div>
<div id="banner" style="position:absolute; right:10px; top:10px; z-index:2; width:468px; height:160px; background-color:#0f0;">&nbsp;</div>
</div>
<div id="content" style="margin: 180px 10px 0px 10px; background-color:#fff000; height:300px;">
</div>
</body>
</html>

Hope this helps.

Robert Carpenter
"Disobedience to conscience is voluntary; bad poetry, on the other hand, is usually not made on purpose." - C.S. Lewis (Preface to Paradise Lost)
ô¿ô
 
Upvote 0 Downvote
Ok thanks, I've tried your suggestion though one issue crops up when I try to add a navigation bar below - the images both overlap the navigation bar, any ideas?
I tried clear:both; in header but it doesn't work.

CSS
#topnavigation
{
padding: 3px;
margin: 4px 0 4px 0;
background:#fff;
border-color: #000;
border-style: solid;
border-width:2px 0 2px 0;
text-align:center;
}

HTML
<div id="header" style="margin-left:10px; margin-right:10px; width:auto; min-width:200; background-color:#00f;clear:both;">

<div id="logo" style="position:absolute; left:10px; top:10px; z-index:3; width:216px; height:81px;">
<a href="/index.asp"><img src="/images/logo.gif" alt="Logo" /></a>
</div>
<div id="banner" style="position:absolute; right:10px; top:10px; z-index:2; width:468px; height:160px;"><a href="/index.asp"><img src="/images/468x60.gif" alt="Banner" /></a></div>

</div>


<div id="topnavigation">
Link 1 link 2 link 3 link 4
</div>
 
Upvote 0 Downvote
I came up with a solution to put the div id=navigation in a container div which works

CSS

#container
{
width: 100%;
background-color: #fff;
position:absolute; top:90px;
}

3 questions -
Is this a good solution?
why doesn't the other one work? (is it something to do with the absolute taking the div out of the flow of the page)
there seems to be alot of text, probably just as much as if I used tables?

thanks
 
Upvote 0 Downvote
why are you so reluctant to use a table?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
1DMF said:
why are you so reluctant to use a table?
Click to expand...

That fact that you have to ask that means you probably don't know why.

Most professional web developers are trying to move towards tableless layouts for better accessibility, portability, and semantically correct markup. Tables are simply not necessary for positioning your site layout, and can look and sound really bad for browsers that do not support them fully (screen readers, mobile browsers, etc etc).

While tables are fine for rendering tabular data, these days they are more of a hindrance than a help for making your site "look good".

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I don't understand, tables are one of the fundemental HTML tags, used in HTML3 since 1996, and your saying todays modern mobile devices can't handle HTML3

10 years on and we have new devices without HTML3 capability, poor show if you ask me.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
1DMF,

I suggest you read up on accessibility, XHTML, and semantically correct markup - it explains a lot about a lot of the questions you've been asking recently.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
what does semantically mean?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
honestly 1MDF, lately you've been posting some rather closed-minded statements. you come on here with questions, people give you their advice, then you regularly try to shoot us down, render our suggestions as garbage and useless, then claim that any browser that does not show your site correctly has some flaw and should be avoided completely. it's high time you step back and realize that maybe you're not as perfect as you think you are. there are dozens of people in these forae (it means "more than one forum") that have extensive knowledge in HTML, XHTML, web accessibility, etc., and they've posted their best practices and knowledge to help you learn.

maybe next time, stop assuming we're wrong and think outside of your box.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Being told that virtually everything about the way you are doing things is totally wrong can have that effect on a person, especially if it is done in a less-than-tactful manner. There ARE still web professionals who use tables to format their web pages. In many circumstances it can be MUCH easier, and less prone to browser-specific formatting problems, to use tables than to try to format the page using divs and css. Personally I use a little of both.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
when we are repeatedly told that what we are describing is stupid, wrong, and pointless, we get that way too. and that's the way it's been. we appreciate your argument for the sake of argument as always, though, tsdragon.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
I never argue JUST for the sake of argument, but sometimes someone needs to play the "devil's advocate" to get a discussion moving, or to make a point. THAT I am good at.

I know how frustrating it can be to try to help someone and be told they don't like what you're telling them. I also know what it's like to be on the other side of the fence. I'm just trying to defuse a potential argument here by pointing out that there are two sides to the situation, and that perhaps a little more tact in the way we (yes, I include myself) says things could go a long way toward keeping things on a more civil level.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
cLFlaVA - hey i'm lost, who's arguing? I don't agree with everything i'm told and neither should you, did you do everything your parents told you ?

my train of thought is if it works, use it! and if it don't, don't, and that can be taken from either my code point of view or the browser!

i'm also confused my last post in here asked a simple question regarding the meaning of a word. How is that a
closed-minded statements
Click to expand...
and you know what , i didn't understand the description in the dictionary either, but thanks for posting earthandfire.

Of or relating to meaning, especially meaning in language
Click to expand...

so for my code to work on a mobile device, it has to be written relating to the meaning of language.

Sorry, i'm obviously not as educated as you, which for some reason you take offense, but that doesn't make sense to me,however it doesn't make either of us wrong!





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
1DMF said:
I don't agree with everything i'm told and neither should you, did you do everything your parents told you ?
Click to expand...
I don't understand how you expect to learn anything that way though. The box on the right says that you have been given advice by the best experts in this forum. Are you sure your experience and knowledge is greater than their own combined, to simply dismiss their suggestions?
 
Upvote 0 Downvote
Let me try and define the phrase "semantically correct markup" in a more HTML-centric way (the dictionary reference would have been a general definition devoid of context to this situation).

While it is perfectly legal for HTML pages to contain many elements in many combinations, giving the elements some form of structure can help make them more readable - to a browser, to a search engine, to a screen reader, and to the end user.

Much like having a table of contents in a book makes finding specific data (chapters, etc) easier, so having a well-defined structure to the elements on a web page can make it easier for the aforementioned user agents to parse a document with the minimum of fuss.

Basically - it's by no means essential to have a good structure, but it really can help in numerous ways.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
oh I see, so some tags should be in a specific order, like lets say the HTML tag then the HEAD tag etc..

Although mixing up some tags may not break browsers, tecnically (Semantically) it is incorrect.

A bit like i've learnt that pseudo classes have a heirachy, to be semantically correct.

Is that it?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
744
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
789
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
624
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
669
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top