CSS: 2 Columns Positioning
Hi
I have got a 2-column Wordpress theme which I want to customize to suit my needs. Here is the website.
I want the first column (left) to start approximately 300px down whereas the sidebar (right column) stays put.
Here is the stylesheet which controls the layout.
* { padding: 0; margin: 0; }
body {
background: #BBE8E7 url(images/topbg.gif) no-repeat center 14px;
font-family: Arial, Verdana;
}
a {
text-decoration: none;
color: #2a91b9;
}
img {
border-style: none;
}
h3 {
color: #36afdc;
font: normal 18px Arial;
text-decoration: none;
margin-left: 10px;
margin-bottom: 10px;
}
#wrapper {
margin: -250px auto;
width: 828px;
}
#main_content {
margin-bottom: 10px;
overflow: auto;
width: 828px;
display: block;
}
#header {
color: #333;
width: 828px;
height: 50px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
}
#header h1 {
width: 264px;
height: 45px;
float: left;
background: url(images/logo.png) no-repeat;
overflow: hidden;
text-indent: -2000px;
margin-top: 200px;
margin-left: 50px;
display: inline;
}
#header h1 a {
width: 264px;
height: 45px;
float: left;
}
#header ul.tabs {
width: 440px;
clear: both;
height: 33px;
overflow: hidden;
margin-top: 22px;
margin-left: 27px;
float: left;
display: inline;
}
#header ul.tabs li {
overflow: hidden;
float: left;
width: 140px;
height: 22px;
margin-right: 3px;
background: url(images/tabbg.png) no-repeat;
text-align: center;
font-family: verdana;
color: #4b4b4b;
padding-top: 11px;
list-style-type: none;
}
#header ul.tabs li a {
font-family: verdana;
color: #4b4b4b;
text-decoration: none;
overflow: hidden;
list-style-type: none;
}
#header ul.tabs li a:hover {
color: #36afdc;
}
#header ul.tabs li.middle {
overflow: hidden;
float: left;
width: 140px;
height: 22px;
margin-right: 4px;
background: url(images/tabbg.png) no-repeat;
text-align: center;
font-family: verdana;
color: #4b4b4b;
padding-top: 11px;
list-style-type: none;
}
#content {
float: left;
color: #333;
margin: 0px;
padding: 0px;
width: 590px;
display: inline;
position: relative;
}
#content .top {
width: 590px;
height: 15px;
float: left;
background: url(images/content_top.png) no-repeat;
display: inline;
margin: 0;
padding: 0;
}
#content .bottom {
width: 590px;
height: 17px;
float: left;
background: url(images/content_bottom.png) no-repeat;
display: inline;
margin: 0;
padding: 0;
}
.main_post {
width: 560px;
float: left;
background: url(images/content_main.png) repeat-y;
display: inline;
margin-top: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
}
.main_post .post {
width: 560px;
float: left;
margin-bottom: 8px;
border-bottom: 2px solid #e8e8e8;
padding-bottom: 8px;
}
.main_post .title a {
color: #36afdc;
font: normal 20px Arial;
margin-top: 0;
margin-bottom: 3px;
}
.main_post .date {
color: #d2d2d2;
font: 12px Arial;
}
.main_post .date a {
color: #d2d2d2;
text-decoration: none;
}
.main_post .content {
color: #7e7c7c;
font: 12px "Trebuchet MS";
margin-top: 15px;
}
.main_post blockquote {
background-image: url(images/bquote.gif);
background-repeat: no-repeat;
background-position: left 10px;
padding-left: 40px;
clear: both;
padding-top: 12px;
padding-bottom: 10px;
margin-right: 15px;
margin-top: 0;
margin-left: 9px;
}
.main_post .content p {
margin-bottom: 10px;
line-height: 17px;
}
.main_post .content a {
color: #36afdc;
font-weight: normal;
font-style: normal;
text-decoration: underline;
}
.main_post .content a:hover {
text-decoration: none;
color: #2c93b9;
}
.main_post .comments {
background: url(images/comment_guy.gif) no-repeat;
padding-left: 32px;
color: #3f3f3f;
font: bold 11px Arial;
padding-top: 8px;
padding-bottom: 4px;
margin-top: 5px;
float: left;
}
.main_post .comments a {
color: #3f3f3f;
font: bold 11px Arial;
}
.navigation {
width: 560px;
float: left;
padding: 0;
margin-bottom: 0;
margin-top: 3px;
}
.navigation a {
color: #515151;
text-decoration: underline;
font: bold 12px georgia;
}
.navigation a:hover {
color: #515151;
text-decoration: none;
font: italic bold 12px georgia;
}
.navigation .alignleft {
float: left;
width: 200px;
text-align: left;
}
.navigation .alignright {
float: right;
width: 200px;
text-align: right;
}
#sidebar {
display: inline;
color: #333;
padding: 0;
width: 228px;
float: right;
}
.side_con {
width: 228px;
margin-bottom: 8px;
float: left;
display: inline;
}
.side_con h2 {
color: #464040;
font: 17px "Trebuchet MS";
text-align: center;
margin-bottom: 5px;
}
.side_con ul.cat {
width: 206px;
float: left;
overflow: hidden;
margin-left: 3px;
}
.side_con .rss {
margin-top: 5px;
float: left;
text-align: center;
width: 210px;
}
.side_con ul.cat li {
overflow: hidden;
list-style-type: none;
width: 206px;
height: 30px;
background: url(images/cat.gif) no-repeat;
text-align: center;
color: white;
font: bold 16px arial;
margin-bottom: 3px;
}
.side_con ul.cat li a {
overflow: hidden;
list-style-type: none;
width: 206px;
height: 23px;
text-align: center;
color: white;
font: bold 16px arial;
background-repeat: no-repeat;
display: block;
margin-top: 0;
padding-top: 7px;
}
.side_con ul.cat li a:hover {
overflow: hidden;
list-style-type: none;
background: url(images/cat_over.gif) no-repeat;
text-align: center;
color: white;
font: bold 16px arial;
}
.side_con ul.recent {
float: left;
font: 12px "Trebuchet MS";
color: #393939;
overflow: hidden;
margin-left: 3px;
padding-left: 15px;
}
.side_con ul.recent li {
float: left;
font: 11px "Trebuchet MS";
color: #393939;
margin-bottom: 6px;
list-style-type: square;
list-style-position: outside;
margin-left: 0;
}
.side_con ul.recent li a {
color: #393939;
text-decoration: none;
margin-left: -5px;
font-size: 11px;
margin-top: 1px;
}
.side_con ul.recent li a:hover {
color: #36afdc;
text-decoration: none;
}
.side_con .top {
background: url(images/sidebar_top.png) no-repeat;
width: 228px;
height: 17px;
float: left;
}
.side_con .bottom {
background: url(images/sidebar_bottom.png) no-repeat;
width: 228px;
height: 17px;
float: left;
}
.side_con .mid {
background: url(images/sidebar_mid.png) repeat-y;
width: 212px;
float: left;
display: inline;
padding-left: 8px;
padding-right: 8px;
}
.searchbase {
width: 155px;
height: 32px;
float: left;
margin-left: 8px;
color: #fff;
font: 12px Arial;
}
.button {
float: right;
width: 30px;
height: 26px;
margin-right: 8px;
margin-top: 2px;
}
.searchbase .searchin {
width: 150px;
background: url(images/searchbg.gif) no-repeat;
border-style: none;
padding-left: 5px;
padding-top: 8px;
padding-bottom: 9px;
color: #3f3534;
font: bold 13px Arial;
}
h3#comments {
float: left;
width: 560px;
color: #36afdc;
font: 17px Arial;
padding: 0;
margin: 15px 0 0;
}
h3#respond {
float: left;
width: 560px;
color: #36afdc;
font: 17px Arial;
padding: 0;
margin: 15px 0 0;
}
ol.commentlist {
float: left;
width: 95%;
font: 12px/17px Verdana;
color: #414141;
margin-right: 0;
margin-top: 5px;
margin-bottom: 0;
overflow: hidden;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}
ol.commentlist a {
color: #36afdc;
text-decoration: none;
}
ol.commentlist li {
margin-bottom: 10px;
border: 1px solid #dadada;
padding: 7px 5px 8px 90px;
overflow: hidden;
background: url(images/icon.png) no-repeat;
}
ol.commentlist li p {
width: 100%;
}
#commentform {
width: 100%;
float: left;
}
#commentform textarea#comment {
width: 500px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid #999;
}
#commentform input {
border: 1px solid #999;
margin-top: 2px;
margin-bottom: 2px;
padding: 2px;
}
#commentform input#submit {
padding: 5px;
background-color: #36afdc;
color: white;
border-style: none;
}
.clear { clear: both; background: none; }
.footer {
width: 590px;
margin-top: 10px;
margin-bottom: 10px;
color: #a09999;
font: 12px "Trebuchet MS";
text-align: center;
float: left;
display: inline;
}
.footer a {
color: #a09999;
text-decoration: underline;
}
.footer a:hover {
color: #a09999;
text-decoration: none;
}
decibel.places posted this at 00:01 — 30th December 2008.
He has: 1,494 posts
Joined: Jun 2008
umm - 5 minutes with Firefox using the Firebug and Web Developer addons yields this solution:
add
margin-top: 300px;to #content and removemargin: 0px;:#content {margin-top: 300px;
float: left;
color: #333;
padding: 0px;
width: 590px;
display: inline;
position: relative;
}
Maxal posted this at 14:06 — 30th December 2008.
They have: 15 posts
Joined: Dec 2007
Thanx for the reply decibel.places, I have tried your solution but it's not working as contents and tabs are two different divs. You can have a look at the site after the implementation of your solution. The tabs are controlled by the following:
#header ul.tabs {width: 440px;
clear: both;
height: 33px;
overflow: hidden;
margin-top: 22px;
margin-left: 27px;
float: left;
display: inline;
}
If I increase the top margin, it will also drag the sidebar (right column) down, which I want to avoid.
webwiz posted this at 18:15 — 30th December 2008.
He has: 629 posts
Joined: May 2007
First let me say what a pleasure it is to see a page that validates, has considerate text size and contrast, and does not break when text is enlarged.
Sadly, the layout appears so different from one browser to another, I find it hard to imagine what you are trying to achieve. Also, what do you intend to do with the header, which at this point is positioned off the page, but would show the 'logo.png' image that seems to be completely transparent(?).
Can you mock up a page that shows what you want, and link to a screen shot of it? It's a nice design, and I'd like to help - once I know what you want.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Maxal posted this at 19:24 — 30th December 2008.
They have: 15 posts
Joined: Dec 2007
Thanx webwiz for your review. You ar right that the layout is behaving abnormally on different browsers. I really do not have any clue as to how could it be fixed. I just love the theme. You can have a look at this. This should give you clear idea. I had managed to achieve the result, but again this layout is screwed in Safari.
My idea is to have the right column start from the top whereas the left column (tabs+main contents) somewhere below the top background. You are right that the logo.png is transparent at the moment, I couldn't find how to remove it as it wasn't needed by me.
decibel.places posted this at 20:09 — 30th December 2008.
He has: 1,494 posts
Joined: Jun 2008
Try putting this at the end/bottom of your stylesheet:
div#header ul.tabs {margin: 500px 0 0 -350px; position: absolute}looks ok in Firefox - in other browsers, you might have to mess around
I find the css attributes that most often cause/solve cross browser issues are position: (absolute, static, relative) and display: (block, inline, table etc)
You may find that you need a separate stylesheet for IE, or even IE6 and IE7
webwiz posted this at 21:17 — 30th December 2008.
He has: 629 posts
Joined: May 2007
The URL you just posted differs from your page in several ways. The "tabs" are inside the "content" DIV, for example, thus they position themselves above the rest of the content. Yours has to be positioned separately, as decibel.places points out.
I'm not sure that page is your best template. It seems unnecessarily complicated for a simple two column page. It seems to me to suffer from a bad case of both "divitis" and "classitis'. I suggest you would be better off with one of the two-column templates from Layout Gala. Put the navigation inside the main content, and you should be good to go.
If you run into problems with one of Layout Gala's templates, post a new thread and we'll try to help you out.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
decibel.places posted this at 17:14 — 31st December 2008.
He has: 1,494 posts
Joined: Jun 2008
I am a bit concerned... we have provided a few of specific suggestions, and suggested tools that Maxal can use to further customize the css.
I am not interested in providing endless support for basic css issues - a service that I charge good $$$ for - although webwiz or other TWF members may feel differently.
If Maxal is having problems with managing the template, a simpler tempate as webwiz suggested may help.
If Maxal is having difficulty with basic css, there are free resources to learn more:
http://www.tizag.com/cssT/
http://www.w3schools.com/css/default.asp
Maxal posted this at 19:04 — 31st December 2008.
They have: 15 posts
Joined: Dec 2007
Gentelmen, you both have been extremely helpful. I agree that I should settle with something less complicated. I will definitely check with Layout Gala for a better, stable and easy template. Thank both of you for your time, tips and suggestions
Max
decibel.places posted this at 19:31 — 31st December 2008.
He has: 1,494 posts
Joined: Jun 2008
Sorry, I did not mean to be rude or critical
sometimes I am blunt but my intentions are friendly...
please feel welcome to continue to post questions!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.