Web Design Discussion - Can anyone solve this CSS issue?

Print Page | Close Window

Can anyone solve this CSS issue?

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Web Design Discussion
Forum Description: Discussion on web design and development subjects.
URL: https://forums.webwiz.net/forum_posts.asp?TID=22019
Printed Date: 29 March 2026 at 9:42am
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Can anyone solve this CSS issue?

Posted By: pjb007
Subject: Can anyone solve this CSS issue?
Date Posted: 24 November 2006 at 11:49pm

I've created a site using float and clear to get the various items in the right place, but if I shrink the window to see how it will look on smaller screens it begins to fall apart. I can't work out why.

Its in ASP.NET version 2 so here is the code.

Can anyone help?

CSS File

[code]
/* Div Containers */
.header {
background-color:#0000FF;
padding-left:10px;
}

.menu {
background-color:#CCCCCC;
clear:both;
padding-left:10px;
}

.pic {
background-image:url(/images/pic.jpg);
background-repeat:no-repeat;
float:left;
width: 300px;
}
.caption {
background-color:#00FFFF;

height:inherit;
width:inherit;
}
.main {
float:left;
width: 70%;
padding-top:10px;
padding-left:20px;
padding-right:10px;
}

/* Text Styleing */
.captiontext
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}

.title
{
font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:2em;
}
.title2
{
font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:0.5em;
}

h3
{
font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
font-size:2em;
color:#CC0000;
font-weight:bold;
}

p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
}

.psmalltitle
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:

Replies:

Posted By: pjb007
Date Posted: 02 December 2006 at 9:12pm

Any ideas anyone?

Posted By: dpyers
Date Posted: 03 December 2006 at 1:22am

I'd start by trying either a clear:both or a clear:left for .main
You probably don't need the float for that class either.

-------------

Lead me not into temptation... I know the short cut, follow me.

Posted By: pjb007
Date Posted: 03 December 2006 at 2:08pm

Thanks, I've tried that, but it's not worked.

I am fairly sure that the float is needed though I did try without.

Posted By: dfrancis
Date Posted: 03 December 2006 at 4:22pm

do you have it on a site somewhere? I can't tell how it's supposed to look much less where it is broken.

idea?... try using "display:block;" or "display:inline-block;"

(it also appears as though you have an extra /div after caption... but I don't think that would be an issue)

Posted By: pjb007
Date Posted: 03 December 2006 at 4:29pm

I can't get ASP.NET v2 to work on my host, it is enabled but it won't work.

I'll be moveing hosts when my time with my current host expires I think