?
Solved

CSS: 100% width - regarding browser/html size

Posted on 2011-03-01
8
Medium Priority
?
319 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

743 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