/    Sign up×
Community /Pin to ProfileBookmark

page breaking in 800×600

Copy linkTweet thisAlerts:
May 12.2008

Hi folks, Just a quick questions for the html/css buffs out there.
Ive been trying to get this right for some time but its driving me totally nuts…?

oK.. i am trying to build a nice page without tables. I have a lovely header that looks ok but when i check the page in the dreaded 800×600 the page will break and a banner that is in the header will collapse and form a new row…

Its ok in everything else…

The html..

[code=html]<body>
<div class=”header”>
<div class=”headleft”><a href=”main.htm”><img src=”img/logo.gif” alt=”Logo” /></a></div>
<div class=”headright”><img src=”img/leaderboard.gif” alt=”Logo” /></div>
</div>[/code]

css..

[CODE]body {
margin:0;
font-family: verdana;
font-size: 12px;
color: #000000;
}
.header {
width:100%;
height:100px;
background-color: #FFDFDF;
padding: 5px;
}
.headleft {
float:left;
}
.headleft img {
border: 0;
}
.headright {
float:left;
padding-left: 10px;
}
.headright img {
border: 0;
}[/CODE]

I really dont want to have to use a table i with this but i just cant seem to find a way of keeping it all in line when checking in 800×600.

Any hints or ideas would be very welcome..

Thanks..?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriMay 12.2008 — You could set a minimum width on the body equal to the total width of the two images plus the padding. You also don't need the two inner divs - styles can be attached directly to the <a> and image :[CODE]<body>
<div class="header">
<a href="main.htm"><img src="img/logo.gif" alt="Logo" /></a>
<img src="img/leaderboard.gif" alt="Logo" class="headright" />
</div>[/CODE]
[CODE]body {
margin:0;
font-family: verdana;
font-size: 12px;
color: #000000;
[COLOR="Blue"]min-width: 820px;[/COLOR]
}
.header {
height:100px;
background-color: #FFDFDF;
padding: 5px;
}
.header img {
float:left;
border: 0;
}
.headright {
margin-left: 10px;
}[/CODE] Change the value of min-width to suit.
Copy linkTweet thisAlerts:
@bolty2ukauthorMay 12.2008 — Thanks Centauri..

You and some of the other guys who offer free advice on the forum probably dont get the thanks you really deserve..

In that last post you sorted the issue, and taught me something new at the same time.

Thank You...

webdeveloper.com forever...?
×

Success!

Help @bolty2uk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...