CSS Page Layout

HTML & CSS
1

Site: www.propertieswithstyle.com

On my laptop (1366 x 768) My pages render well I suppose.

On my desktop (larger wider screen) my charts are cut on at the right side of the pages.

Select a city on the “City List - Value Trends - Data & Charts” Scroll down and you’ll see the three charts.

Also, in all of my pages, if I zoom out on the page the menu and data on the pages mesh together with the menu on top.

CSS:


#pageWrapper {
	min-width:752px;
	max-width:98em;
	
}

#masthead {
	margin-top:4px;
	width: 100em;
	
	}

#sideBar {
	float:left;
	width:320px; 		/*actually sets the width of the sideBar content div*/
	padding-top:.75em; 	/*was 2em */
	margin-left: .5em;

}

h1		{
	padding-left:28px;
	font: 48px/52px tangerine,arial,helvetica,sans-serif;
	color:#239BF3; /* #4DF; */
	text-shadow:0 0 8px #ADF;
}

Is there a quick fix for this?

Thanks . . . Rick

2

Your need to add a new CSS declaration so images adjust size relative to their container

img { max-width: 100%; height; auto; }
3

Hi, R Schreiber (a.k.a. Mr. Quick Fix :slight_smile: )

You have a max-width in ems assigned to the page wrapper. If one zooms the font size, the images remain their natural size but the width of this container changes. It’s better to allow the container to “go with the flow” when possible. In this case, you may want to try width or max-width:1320px. See if that is more to your liking.


#pageWrapper {
    [color=red]max-width: 96em;    /* try ~1320px */[/color]
    min-width: 752px;
}

The next item is the position:fixed menu. It’s container has a fixed width, but the menu has no width. Give it a width and it will stay within its apparent area.


#mainMenu {
    line-height: 80%;
    list-style: none outside none;
    margin: 0.2em;
    position: fixed;
    [color=blue]width: 300px;    /* add me */[/color]
}

FYI: If the font size is zoomed large enough, the position:fixed menu can overflow the viewport and will not be viewable until the user reduces his font size. Be aware that this is a limitation of position fixed objects.

Hope this is quick enough. :slight_smile: