16. Clearing elements


#1

I have one question about this task

I am interested only for CSS to ask.

For .left and .right we explicitly write here 300px how much height we want to be. But how can i write it - i want a left div and right div always to be from header to footer height but footer to be on bottom of screen as header is on top of the screen?

div {
	border-radius: 5px;
}

#header {
	height: 50px;
	background-color: #F38630;
	margin-bottom: 10px;
}

.left {
	height: 300px;
	width: 100px;
	background-color: #A7DBD8;
	float: left;
	margin-bottom: 10px;
}

.right {
	height: 300px;
	width: 100px;
	background-color: #E0E4CC;
	float: right;
	margin-bottom: 10px;
}

#footer {
	height: 50px;
	background-color: #69D2E7;
	/*Add your CSS here!*/
	clear: both;

}

#2

Hi, I do not really understand what you want. But try this code below maybe it will answer your question.

div {
	border-radius: 5px;
}

#header {
	height: 50px;
	background-color: #F38630;

}

.left {
	height: 300px;
	width: 150px;
	background-color: #A7DBD8;
	float: left;
    padding: 10px;
}

.right {
	height: 300px;
	width: 150px;
	background-color: #E0E4CC;
	float: right;
	padding: 10px;
}

#footer {
	height: 50px;
	background-color: #69D2E7;
	/*Add your CSS here!*/
    clear: both;
}

#3

It is little harder for me when i want to explain on english.
Look here can i make this? I want to be all and always in full screen (if i change screen resolution). If i write (in that code) i.g. for left side height: 400px and the same for a right and if i change for footer height from 50px to 150px i will get the footer to go outside example
I am trying to understand can i put something in CSS and when i change height of footer to automatically left and right side stretch to footer div? Or i have to manually to enter how much height i want to be left and right side?
In this case if i want to footer stay on height 150px then i have to change left and right side from 400px to 300px.

Maybe i will soon understand better how this works.


#4

if you want this, you should use percentage height, but even this isn't perfect. I made an example here, take al ook


#5

I like it! Thanks! This will improve my understanding.


#6

but on smaller screens, this will not be perfect. You could of course do this dynamic with javascript

Also, percentage inherit from parent (is relative to parent) so you have to make html and body a 100% height, otherwise you have a problem.


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.