Solved

CSS: 100% width - regarding browser/html size

Posted on 2011-03-01
8
317 Views
Last Modified: 2012-06-21
Hi folks,

every time I think I understand CSS, I experience a problem that shows me that I know nothing.

In the attached snipped I tried to simplify the problem:

the html page have some content: the size of this is unknown, because it contains dynamic content (example: the user can put as many columns into a table as he wants)
there is an additional container, which should be always on the right side of the content. In the demo this is called "help"
the width of header, navigation and footer bars should always fit the "page" size: If the "body" size is smaller than the browser window, the bars should be as long as the browser window. If the "body" size exeeds the browser size, the bars should be as long as the "body"

I tried setting width:100% and min-width:100% on various places, but nothing solves the problem.
If the user content size is small, there isn´t a problem, but in the attached demo I set the element "unknownDynamicContentWithVariableSize" to a width of 1500px (which should exceed most of the browser window sizes ^^)

The page must be only compatible to IE6-9 (I´m using X-UA-Compatible: IE=7 ... hoping IE6 compatibility can be solved via some little "hacks")... It would be fine if it will be compatible to FF & Chrome too, but this doesn´t care yet.


I'm glad about all ideas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>sizeTest</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<style type="text/css">
html, body
{
  /* setting default padding/margin */
  padding:0;
  margin:0;
  height:100%; /* footer positioning are related to this */
}
#mainWrapper
{
  /* footer positioning are related to this */
  position: relative;
  min-height: 100%;
}
#mainContainer
{
  padding-bottom: 20px;
}
#header1
{
  border: 1px solid blue;
}
#header2
{
  border: 1px solid yellow;
}
#navigation
{
  border: 1px solid red;
}
#contentWrapper
{
  postion:relative; /* absolute positioned inner elements should relate to this element */
}
#content
{
  float:left; /* content should be on the left side. help should be right of this */
  margin-top: 20px; /* some space */
  margin-bottom: 40px; /* make room for footer */
}
#help
{
  float: left; /* help should be always on the right side of the content */
  margin-left: 20px; /* space between content and help */
  margin-top: 20px; /* some space for better readability */
  margin-bottom: 40px; /* make room for footer */
}
#footer
{
  /* should be at bottom (max(browserheight, htmlheight)) */
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 35px;
  width: 100%; /* need 100% here because absolute positioning? */
  border-top: 1px solid #D2D2D2;
}
.clear
{
  clear:both;
}

#unknownDynamicContentWithVariableSize
{
  /* some test values to demonstrate big dynamic entries */
  width:1500px;
  height:2000px;
  background-color:green;
}
#unknownDynamicHelpContentWithVariableSize
{
  /* some test values to demonstrate big dynamic entries  */
  width:200px;
  background-color:yellow;
}
</style>
</head>
<body>
<div id="mainWrapper">
  <div id="mainContainer">
    <div id="header1">header1 content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
    <div id="header2">header2 content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
    <div id="navigation">navigation content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
    <div id="contentWrapper">
      <div id="content">
        <div id="unknownDynamicContentWithVariableSize">
          content ...<br />
          user can put much input, table columns, etc. into this
        </diV>
      </div>
      <div id="help">
        <div id="unknownDynamicHelpContentWithVariableSize">
          help content ... should be always right of content
        </diV>
      </div>
      
      <!-- Clear all remaining floats -->
      <div class="clear"></div>
    </div>
    <div id="footer">footer content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
  </div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:maxworx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35006674
like this?

please let me know if i didn't understand the problem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>sizeTest</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<style type="text/css">
html, body
{
  /* setting default padding/margin */
  padding:0;
  margin:0;
  height:100%;
  width:100%;
}
#mainWrapper
{
  position: absolute; /* footer positioning are related to this */
  height:100%;
  width:100%;
}
#header1
{
  border: 1px solid blue;
}
#header2
{
  border: 1px solid yellow;
}
#navigation
{
  border: 1px solid red;
}

#contentWrapper
{
}

#footer
{
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 35px;
  width: 100%; /* need 100% here because absolute positioning? */
  border-top: 1px solid #D2D2D2;
}


#content
{
	position:absolute;
	left:0px;
	width:80%;
	height:auto;
	background-color:green;
	overflow:auto;
}
#help
{
	position:absolute;
	left:80%;
	width:19%;
	background-color:yellow;
	overflow:auto;
	padding:10px;
}

</style>
</head>
<body>
	<div id="mainWrapper">
		<div id="mainContainer">
			<div id="header1">header1 content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
			<div id="header2">header2 content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
			<div id="navigation">navigation content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
			<div id="contentWrapper">
				<div id="content">
					<div id="unknownDynamicContentWithVariableSize">
					  content ...<br />
					  user can put much input, table columns, etc. into this
					  user can put much input, table columns, etc. into this
					  user can put much input, table columns, etc. into this
					  user can put much input, table columns, etc. into this
					  content ...<br />
					  user can put much input, table columns, etc. into this
					  content ...<br />
					  user can put much input, table columns, etc. into this
					  content ...<br />
					  user can put much input, table columns, etc. into this
					</diV>
				</div>
				<div id="help">
					<div id="unknownDynamicHelpContentWithVariableSize">
						help content ... should be always right of content
					</diV>
				</div>
			</div>
			<div id="footer">footer content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
		</div>
	</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:maxworx
ID: 35006932
Unfortunately no.

The content should not be scrollable. The whole site must be scrolled instead.
The page are some kind of "framework".

I try to explain the elements with the ids "unknownDynamicContentWithVariableSize" and "unknownDynamicHelpContentWithVariableSize".
I only added them, to have a ease possibility to demonstrate the problem with the user contents.
Some of the contents which may be in the "content" and "help" elements can exceed 32k lines of HTML. Some of these have "fixed" widths, some not.
If there is (as example) a table with 15 columns, and each of these columns have a width of 100px - the resulting content width is 1500px. To demonstrate this without creating so much content, I added the DIV "unknownDynamicContentWithVariableSize".

Assuming the browser window width is 1024px:
- The "HTML" width of the example will be 1500px (Content) + 200px (Help) + any paddings/border = 1700px: The header/navigation/footer width should be the 1700px of the HTML instead of the 1024px of the browser
- If the width of "unknownDynamicContentWithVariableSize" is only 300px, the "HTML" width will be 300px (Content) + 200px (Help)  + any paddings/border = 500px: The header/navigation/footer width should be the 1024px of the browser instead of the 500px of the HTML

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35007029
try this then
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>sizeTest</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<style type="text/css">
html, body
{
  /* setting default padding/margin */
  padding:0;
  margin:0;
  height:100%;
  width:100%;
}
#mainWrapper
{
  position: absolute; /* footer positioning are related to this */
  height:100%;
  width:1700px;
}
#header1
{
  border: 1px solid blue;
}
#header2
{
  border: 1px solid yellow;
}
#navigation
{
  border: 1px solid red;
}

#contentWrapper
{
}

#footer
{
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 35px;
  width: 1700px; 
  border-top: 1px solid #D2D2D2;
}


#content
{
	position:absolute;
	left:0px;
	width:1500px;
	height:auto;
	background-color:green;
	overflow:auto;
}
#help
{
	position:absolute;
	left:1500px;
	width:200px;
	background-color:yellow;
	overflow:auto;
	padding:10px;
}

</style>
</head>
<body>
	<div id="mainWrapper">
		<div id="mainContainer">
			<div id="header1">header1 content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
			<div id="header2">header2 content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
			<div id="navigation">navigation content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
			<div id="contentWrapper">
				<div id="content">
					<div id="unknownDynamicContentWithVariableSize">
					  content ...<br />
					  user can put much input, table columns, etc. into this
					  user can put much input, table columns, etc. into this
					  user can put much input, table columns, etc. into this
					  user can put much input, table columns, etc. into this
					  content ...<br />
					  user can put much input, table columns, etc. into this
					  content ...<br />
					  user can put much input, table columns, etc. into this
					  content ...<br />
					  user can put much input, table columns, etc. into this
					</diV>
				</div>
				<div id="help">
					<div id="unknownDynamicHelpContentWithVariableSize">
						help content ... should be always right of content
					</diV>
				</div>
			</div>
			<div id="footer">footer content ... size should always fit the page (max(browserwidth, htmlwidth))</div>
		</div>
	</div>
</body>
</html>

Open in new window

0
Independent Software Vendors: 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!

 
LVL 1

Author Comment

by:maxworx
ID: 35007293
The absolute width of the user input is not known to the page as the demo elements id says ;)
-> unknownDynamicContentWithVariableSize
-> unknownDynamicHelpContentWithVariableSize

- User A requests a script. The script loads all contents related to this user and pastes it to the framework template. ... The contents with results in a HTML width of 500px ... but this doesn´t know the framework
- User A changes his mind and loads another 100px content on the fly via AJAX. The resulting HTML width will be 600px
- User B requests the same script. The script loads all contents related to this user and pastes it to the framework template. ... The contents with results in a HTML width of 1700px ... but this doesn´t know the framework
- User B changes his mind and removes an 100px content part on the fly via AJAX. The resulting HTML width will be 1600px

... I hoped the elemens automatically can be resized ... maybe I must calculate the size via JS on pageLoad/contentChange and set the sizes of the elements manually - but why should this so complicated? If I´m using the old table-based layout, the elements automatically resizes - but we problems with cross-browser-compatibility ... now I´m using new styling tools but have to brake SoC?
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 35007325
You can start with a certain width, then as and when user add a column, keep on increasing the width, and the positioning of the right side help
0
 
LVL 1

Author Comment

by:maxworx
ID: 35015402
I am testing these days ... please be patient
0
 
LVL 1

Author Comment

by:maxworx
ID: 35067467
Time passes and nothing has been done yet :/
I do not want that you have to wait longer. No other guy has answered therefor I have to calculate and set the withs/position via JS.

Thx for help
0
 
LVL 1

Author Closing Comment

by:maxworx
ID: 35067572
Fast answers even if I do not like them ^^
0

Featured Post

Industry Leaders: 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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

695 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