I'm working on a two column layout for a web page. One column is for content and the other is navigation. I have adjusted my content column to move it over towards the right side of the page and when I did, the navigation column (which is on the right side of the page) dropped down the page. I've been toying with it for a while trying to get the navigation column to shift up again but it's not working. If anyone has had this problem please let me know what you did to fix it. Thank you all in advance.
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!
-
Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
CSS Column Positioning 1
- Thread starter raniweb
- Start date
-
1
- #2
Posting some code would help us see how you are accomplishing this. There are generally two options, by floating block elements or absolutely positioning one (or more) of them. If you are using floating technique, it is possible that you content column is to big and pushes the navigation column down. If you are using absolute position for the navigation and relative for the content, this shouldn't happen. Tell us where you are.
- Thread starter
- #3
#navBar{
float: right;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#content{
width: 40%;
}
As you can see I'm not very advanced at this but I will try positioning absolute and see if that gets me anywhere. Thank you so much for your help!
float: right;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#content{
width: 40%;
}
As you can see I'm not very advanced at this but I will try positioning absolute and see if that gets me anywhere. Thank you so much for your help!
- Thread starter
- #4
Hey I wanted to let you know that I put in position: absolute and it worked. I had to add some padding and what not but it worked. Thank you so much for you time and help. Here is the current css for content and navigation that I'm using.
#navBar{
padding-left: 62%;
padding-right: 15%;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#content{
padding-left: 12%;
width: 48%;
position: absolute;
#navBar{
padding-left: 62%;
padding-right: 15%;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#content{
padding-left: 12%;
width: 48%;
position: absolute;
A good thing to understand is how the positioning works. Absolute position takes the element away from the normal flow of the document, meaning that the absolutely positioned element will not push the other content around -- it will just hover on top/below it. That is why it is good to always have the main part of the page positioned relatively and the additional parts absolutely. In your case, content would be better off positioned relatively and navigation bar absolutely.
By the way it looks like what you are trying to accomplish here ...
#navBar{
padding-left: 62%;
padding-right: 15%;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#content{
padding-left: 12%;
width: 48%;
position: absolute;
}
Is to put the content in 48% of hte window an the nav in the rest. If that is so you might remove the nav padding-left and make it margin-left.
my $.02
Chris
#navBar{
padding-left: 62%;
padding-right: 15%;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#content{
padding-left: 12%;
width: 48%;
position: absolute;
}
Is to put the content in 48% of hte window an the nav in the rest. If that is so you might remove the nav padding-left and make it margin-left.
my $.02
Chris
- Status