Ruan1618
asked on
HTML & CSS Layout problem
Hi,
I'm, struggling to get my layout right for my website. It is a bit difficult to explain what I'm trying to do so I have created the following images to help me explain. If you look at the layout.jpg you will see how I am trying to get the layout to look by using Div tags. The Header will contain the top border. The example.jpg gives you an example of how it should look when it is finished.
I got it right to look as I want it to look, but there is one problem, when I want to add more content to the main content box I have to change the layout (especially the side border boxes) so the all the boxes fits together again. I do not want to set any fixed heights for the side borders or the main content box. As I add more content to the main content box it will grow in height and I want the side borders to do the same. This means that basically I want the side borders to fill any space next to the Navigation bar and the main content, but I just don't seem to be able to get it right.
I hope that I have given you enough detail on what I am trying to do, but if I haven't just let me know and I will try again. ;)
Oh, there is just one thing... I want to do the layout with Div tags and CSS. :)
Can anyone help me to get this right?
Layout.jpg
Example.jpg
I'm, struggling to get my layout right for my website. It is a bit difficult to explain what I'm trying to do so I have created the following images to help me explain. If you look at the layout.jpg you will see how I am trying to get the layout to look by using Div tags. The Header will contain the top border. The example.jpg gives you an example of how it should look when it is finished.
I got it right to look as I want it to look, but there is one problem, when I want to add more content to the main content box I have to change the layout (especially the side border boxes) so the all the boxes fits together again. I do not want to set any fixed heights for the side borders or the main content box. As I add more content to the main content box it will grow in height and I want the side borders to do the same. This means that basically I want the side borders to fill any space next to the Navigation bar and the main content, but I just don't seem to be able to get it right.
I hope that I have given you enough detail on what I am trying to do, but if I haven't just let me know and I will try again. ;)
Oh, there is just one thing... I want to do the layout with Div tags and CSS. :)
Can anyone help me to get this right?
Layout.jpg
Example.jpg
ASKER
Hi, thanks for the quick response! :-)
Yes, but that doesn't solve the problem. The background will fill the entire .sidecontentleft box, but my problem is not setting a background for the box. The problem comes in with the height of the side border box, the height can not be fixed. If the height is not fixed and the .sidecontentleft box does not have any content (besides the background image that is set to repeat-y) the box will not display at all which does not solve my problem. :-/
Yes, but that doesn't solve the problem. The background will fill the entire .sidecontentleft box, but my problem is not setting a background for the box. The problem comes in with the height of the side border box, the height can not be fixed. If the height is not fixed and the .sidecontentleft box does not have any content (besides the background image that is set to repeat-y) the box will not display at all which does not solve my problem. :-/
Float everything to the left
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi!
At the moment I am floating everything to the left and it is not helping. I have to find some way to side borders act like a spring, the more space there is the more space it will fill (but only for the height).
At the moment I am floating everything to the left and it is not helping. I have to find some way to side borders act like a spring, the more space there is the more space it will fill (but only for the height).
ASKER
Hi Juamez,
Thanks very much, that was the thing I was looking for. This is really a new way to look at div tags and CSS for me. :) There is one problem with the solution though. If I open it in internet explorer the layout seems to be corrupted and that causes another problem. :-/ When I run it in Firefox I don't have any problems, but it can not be browser specific. Any ideas?
Thanks very much, that was the thing I was looking for. This is really a new way to look at div tags and CSS for me. :) There is one problem with the solution though. If I open it in internet explorer the layout seems to be corrupted and that causes another problem. :-/ When I run it in Firefox I don't have any problems, but it can not be browser specific. Any ideas?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi,
Thanks, that is a good thing to know. I have put the DOCTYPE in an it works! yey! Thanks for all your help. It seems like you know a lot about HTML Div tags and CSS, think I need a bit more reading on this subject. :)
Thanks again!
Thanks, that is a good thing to know. I have put the DOCTYPE in an it works! yey! Thanks for all your help. It seems like you know a lot about HTML Div tags and CSS, think I need a bit more reading on this subject. :)
Thanks again!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi DaveBaldwin,
Thanks for your response! Your solutions also helps a lot. :)
Thanks for your response! Your solutions also helps a lot. :)
.sidecontentleft
{
background-image: url('sidecontent-left.jpg'
background-repeat: repeat-y;
}
.sidecontentright
{
background-image: url('sidecontent-right.jpg
background-repeat: repeat-y;
}