Solved

CSS: 100% width - regarding browser/html size

Posted on 2011-03-01
8
314 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
  • 5
  • 3
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 1

Author Comment

by:maxworx
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
Comment Utility
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
Comment Utility
I am testing these days ... please be patient
0
 
LVL 1

Author Comment

by:maxworx
Comment Utility
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
Comment Utility
Fast answers even if I do not like them ^^
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now