Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
- CommentAuthorlittle3skimo
- CommentTimeJul 21st 2009
Hi,
I'm using wordpress to run my site but I seem to be having a css issue while designing. I tried posting on their support forums for assistance but no one was able to help. I was wondering if someone here might have an idea as to why these divs won't sit side by side. Here's the problem:
http://ymlc.com/mge/
The 3 columns aren't fitting inside #container. The 3 columns are #primary (left), #content (centre) and #secondary (right).
The style for these is:
#primary {
width: 212px;
padding: 0px;
margin-top:0
/*border: green 1px solid;*/
}
#content {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
width: 418px;
/*border: yellow 1px solid;*/ }
#secondary {
width: 300px;
margin-right; 10px;
/*border: red 1px solid;*/
}
If I take out the width on the secondary it sits along side the other columns as it should. However it sits in a strange position as shown in the image below:
http://3skimo.com/mg_rejig.jpg
How can I make these columns sit neatly side by side?
Any help would be greatly appreciated. I tearing my hair out trying to figure this one out.
Many thanks. -
Well #container isn't actually containing #primary or #secondary, it is a sibling instead of a parent. That would be the first place to start.
-
- CommentAuthorlittle3skimo
- CommentTimeJul 21st 2009
Ah well that's me totally confused then. :) It's my first time working with wordpress and I'm finding deconstructing it a bit of a nightmare in terms of these three columns.
The only appearances of #container :
div#container {
background: url('http://images.movie-gazette.com/wpimages/container_bg.jpg') repeat-y }
This is the dark grey background for the left column.
and...
div#container,div#primary {
/*margin-top:2em;*/
}
Which I removed. -
div#container {
float:left;
width:100%;
}
So if that does not contain #primary and #secondary, how are you expecting them to all sit next to each other? You really are making this more complex than it needs to be.
Just mark it up like this:<div id="container">
<div id="primary">
...
</div>
<div id="content
...
</div>
<div id="secondary
...
</div>
</div>
Then float them all and assign the appropriate widths to them. -
- CommentAuthorlittle3skimo
- CommentTimeJul 21st 2009
If I was marking this all up myself and designing from scratch that is what I would have done. However I'm having to use wordpress for this project and it's the first time I've ever tried to skin it. I've tried looking through the various templates and such but simply I'm just not sure how primary and secondary are being pulled in. However when I first begen skinning all the columns sat nicely together side by side. It was only when I began to change the widths of the columns that the 3rd one just wouldn't play ball. primary and content are as intended now. But if I take the width off of secondary it starts from the centre of the empty space (as shown in the jpg I posted above - http://3skimo.com/mg_rejig.jpg). With the width it's pushed down below the layout. I'm just looking and hoping for a CSS fix to this because frankly I wouldn't know where to begin with rewriting the templates from the wp admin. -
The fact that it is WordPress should mean nothing. You can completely change the markup of the containing elements. I've provided you with a suggestion to fix the problem, so I guess that's as much help as I can give if you aren't going to take it.
-
- CommentAuthorlittle3skimo
- CommentTimeJul 21st 2009
I'm sorry I'm not quite sure how I seem to have offended you but I was simply trying to explain my problem, there really is no reason for you to be rude. Like I explained above I don't understand how wp is pulling in those elements. That may mean nothing to you but it obviously is an issue for me. The reason I was posting here is because I wondered if there was I way I could fix this issue using just CSS and I've found some very kind and helpful people here in the past. I'm sorry I don't understand how to implement your suggested fix and I really wish I did. A polite "sorry I can't be more help but best of luck" really would have been enough.
1 to 7 of 7