WordPress.com

1. fencingtime
   Member
   Aug 3, 2012, 2:18 PM

   This is my first time ever doing anything with CSS. I've spent quite some time searching these forums and the interwebs, and I was able to change it a bit, but still having some trouble.

   I was able to make my main column wider to the right, and I made my right sidebar smaller to fit. Yay! What I now want to do is make it wider on the left. Here's the code I have now:

   #c2 {
   background:#fff;
   border:solid 4px #d2d2d2;
   border-left:0;
   border-right:0;
   float:left;
   line-height:170%;
   margin:0 5px 0 0;
   overflow:hidden;
   padding:0 30px 30px;
   width:700px;
   }

   #c3 {
   border:solid 4px #d2d2d2;
   border-left:0;
   border-right:0;
   float:left;
   overflow:hidden;
   width:195px;
   }

   I appreciate any help. Thanks!

   The blog I need help with is fencingtime.wordpress.com.

2. fencingtime
   Member
   Aug 3, 2012, 2:20 PM

   Also, is it possible to make the whole content show wider on the page to the right as well? And still keep the sidebar?

3. zandyring
   Happiness Engineer
   Aug 3, 2012, 3:29 PM

   I think what you're asking is how do you make your main content "centered" on the page (so that as you scroll down, you see your content in the center, whereas now it is bumped left for the sidebar) without removing the sidebar? And I think you want it wider in general?

   If you change your #wrap width to 1200px, you will make your entire blog wider. This introduces problems with centering that you'll have to fiddle with to fix, but it's a start. Keep in mind the average width of screens for your readers, and you may introduce a horizontal scroll bar if you make your content too wide.

   You will have to either make a wider header image or center it. That is your #header-image id.

   If you increase your #c2 width to 940px then your fill up the remaining space with your main content.

   I know this isn't exactly what you asked, but you may want to start there for figuring out how you want it to look overall, and then you can work on your margins and padding to align it how you would like.

   Good luck!
   -Z

4. fencingtime
   Member
   Aug 3, 2012, 7:58 PM

   Thank you!!! That was very helpful. It did make it winder overall, which is what I wanted. I'll now have to figure out how to center the header? I'll do some digging. And I'll also try to test it out on some other browsers to see if it fits... I don't want to introduce the horizontal scroll bar :)

   Thanks!
   Jen

5. designsimply
   Staff
   Aug 28, 2012, 4:43 PM

   To center the header image:

   #header-image {
   	width: 100%;
   	text-align: center;
   }

   Or to change out the header image to a different one, first upload a 1200 x 200 pixel image to your media library and copy the image URL, then replace the url() value in the example below with your uploaded image.

   #header-image img {
   	display: none;
   }
   
   #header-image {
   	width: 1200px;
   	height: 200px;
   	background: url(http://fencingtime.files.wordpress.com/2012/04/cropped-6793288022_2b6a78da1b_b.jpg);
   }

Topic Closed

This topic has been closed to new replies.