Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

100% CS Layout

Status
Not open for further replies.
fmrock

fmrock

Programmer
Sep 5, 2006
510
US
Hey Everyone, I am working on creating a page that will have a medical chart on the left and a form on the right. Management does not want the user to have to scroll. I originally layed this page out in tables, but having a hard time making the text area box 100% of the area open on the right side.

So i have been working on a CSS layout.. my first and i have a bit of scroll on the bottom. i have not added any controls or content to the page yet. Any help would be great.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<style type="text/css">
	FORM		{ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
	INPUT		{ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
	SELECT		{ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
	TEXTAREA	{ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
	TABLE		{ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
	TR		{ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
	TD		{ FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }

html {
	margin: 0px;
	padding: 0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-top:0px;
	height:100%;
	}

body {
	margin:0px 0px 0px 0px;
	height: 100%;
	font-family:Arial, Helvetica, sans-serif;
}	



.heading {
	text-align: left;
	margin-left:3px;
	font-weight:bold;
	font-size:18px;
}
  
.Chart {

	margin-left: 0px;
	margin-right: 306px;
	margin-bottom:25px;
	height: 100%; 
	border:solid;
	border-width:2px; 
}

.AddendumForm {
	float: right;
	padding: 0px 0px 0px 0px;
	width: 305px;
	height: 100%;  
	border:solid;
	border-width:2px;
}

.footer {
	padding-top: 0px;
	text-align: center;
	clear: both;
	font-size:small;
}

.container {
	height: 100%; 	
}
</style>
<title>Chart Details</title>
</head>
<body>
<div class="heading">Chart Details</div>
<div class="container">
    <div class="AddendumForm">Form<br>Goes<br>Right<br>Here</div>
    <div class="Chart">CHART HERE</div>
</div>
<div class="footer">Copyright HERE</div>
</body>
</html>
 
Sort by date Sort by votes
What are we helping you with? The fact that your page is too long or do you need us to help you with designing (laying out) other elements? Your page is too long because your container is 100% high and resides under the heading which itself occupies certain height. 100% and some more will be more than your browser screen.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
I am wanting to make it so that it is no scroll bars. I will eventually add in content to those sections, and not much will be in the header/footer. Most will be in the two columns.

This is my first attempt at this so, Im sure it could use a bit of work.

Thanks
 
Upvote 0 Downvote
I don't know if this helps...

I once had a left right scroll bit at the bottom...

I had a navigation box on the left, and a main section on the right. By giving the main section a 100% width it made the page had to scroll as much as the navigation was width... I solved it by indenting the text in the main by the width of the navigation + a bit more, and then placed the main underneath the navigation, rather than having it next to the navigation
 
Upvote 0 Downvote
In your situation, I would just limit the header to say 10%, footer to 5% and main area to 85%. Or different percentage. But something that will altogether make it 100%. As an alternative, you can leave your main at 100% and position header and footer absolutely to the top and bottom of the page -- but this seems to be a more complex idea that has no apparent advantages.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Thanks for your help guys. I am still playing around with getting this setup. Just a bit confusing, at first. Still having problems with the 100% height
 
Upvote 0 Downvote
Do you know of a good example of this online for doing a 100% height and width. I just cant get this to work at all. Can cant find much on google.
 
Upvote 0 Downvote
I changed the layout to a 2 column.. both hight and width at 100%.

In the AddendumForm section I put a form tag, and i have a textarea that I would like to fill what is left of that section. Any advice on how to acomplish this?


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<style type="text/css">
    FORM        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    INPUT        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    SELECT        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TEXTAREA    { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TABLE        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TR        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TD        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }

html {
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    height:100%;
    }

body {
    margin:0px 0px 0px 0px;
    height: 100%;
    font-family:Arial, Helvetica, sans-serif;
}    

.Chart {

    margin-left: 0px;
    margin-right: 305px;
    height: 99%; 
    border:solid;
    border-width:2px; 
}

.AddendumForm {
    float: right;
    padding: 0px 0px 0px 0px;
    width: 305px;
    height: 99%;  
    border:solid;
    border-width:2px;
}

.container {
    height: 100%;     
}
</style>
<title>Chart Details</title>
</head>
<body>
<div class="container">
    <div class="AddendumForm">Form<br>Goes<br>Right<br>Here</div>
    <div class="Chart">CHART HERE</div>
</div>
</body>
</html>
 
Upvote 0 Downvote
Just give your form height of 100%. Then your textarea can be 100% of the form, which is 100% of the .AddendumForm, which is 99% of the container, which is 100% of the body and html. Makes sense, right?

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Vragabond,

Thanks for your help, however when I add the height of the form to 100%, it appears to make the text box the same size as a 100% of the page, and thus make the page scroll. Maybe I am not adding the form height in the correct spot?
 
Upvote 0 Downvote
I don't understand. If you have the textarea fill up 100% of the container and you have something else in that container (let's say taking up 10% of the container) then both will take more than 100% (in my case 110%). So, in order to combat that, make sure your textarea is just as big as the remaining space. If it is not that what is troubling you then please take a bit longer to explain what is the matter. As I have said before, in CSS your heights will always add. So if you have two items one above another and one of them is 100% of the container, the other one will spill out of the container.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
I think the textarea is doing what its supposed to. When i set the textarea to only be rows="5" and

Code: 
.AddendumForm form{
height:100%;
}

The form still must be getting the height from something else, because its well past the bottoms of the page.

I did have a small table layout displaying some information in the top of the AddendumForm div, but removing it, just gets the same results.

There is also to form buttons below the TextArea.

How would you deal with buttons and other elements in this section?
 
Upvote 0 Downvote
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>


<style type="text/css">
    FORM        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    INPUT        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    SELECT        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TEXTAREA    { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TABLE        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TR        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }
    TD        { FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px }

html {
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    height:100%;
	}

body {
    margin:0px 0px 0px 0px;
    height: 100%;
    font-family:Arial, Helvetica, sans-serif;
	}  

.Chart {
    margin-left: 0px;
    margin-right: 305px;
    height: 99%; 
    border:solid;
    border-width:2px; 
	}

.AddendumForm {
    float: right;
    padding: 0px 0px 0px 0px;
    width: 305px;
    height: 99%;  
    border:solid;
    border-width:2px;
	}
.AddendumForm form{
	height:100%;
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
	}

.AddendumForm textarea{
	height:100%;
    margin: 0px;
    padding: 0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
	}

.container {
    height: 100%;     
	}
</style>

<title>Chart Details</title>
</head>
<body>
<div class="container">
    <div class="AddendumForm">

<form action="#.asp" method="post" name="frmAddendum">

<textarea cols="55" name="Addendum" ></textarea>

</form>
 
    </div>
    <div class="Chart">  
    </div>
</div>
</body>
</html>

I stripped out everything from the page, and went back to the basics, Now the textarea will not expand at all.
 
Upvote 0 Downvote
The more I look into this I am wondering if it would be best to create 3 containers in the

<div class="AddendumForm">

1. Information at top.
2 Text area box
3. Submit buttons that hsould be at the bottom of the Addendum form column.

If anyone has any suggestions it would be great, I am stumped. Thanks for your help
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
788
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
409
pmonett
pmonett
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
137
tyutghf
tyutghf
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
326
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
359
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top