Help.. CSS problem

hi,
i'm no css expert and I'm trying to edit my theme..

http://dragonbond.com

The layout width is 1000px.
The sidebar1 is 182px
Sidebar2 (middle column) is 200px
and Content is 618px

there is a space between middle column and the Content. How do I fix this?

 

The widths are perfect & there is actually no space in between middle column and the Content CSSwise.

Is appears so, just because of the background image that is used has a gap in the middle column's background area, of 35 pixels. See the screen shot.

I have added an updated background image [wrapper_bg.jpg], replace the current one with this [of course always with a backup] & the gap should be gone

 

but i did measure the wrapper_bg for each column, and that's the measurement i got.

If you right click and look at:
http://dragonbond.com/wp-content/themes/newdb/images/content_bg.jpg

There's a bit more clouds to the right that's being hidden.. 35px would be right..

How do i show that?

 

You did not understand.

The portion of the background image behind the middle part, PHOTO LOG, is short by 35 pixels. Thats why i took the pain of downloading your background image, open up my image editor, extend the middle pink-colored portion by 35 pixles & attached over there. Only if you would have tried at least once.

Now the background with the cloud is another image. That is bigger than the container #content. Change the line in the CSS to show full clowd.

#content { background:url(images/content_bg.jpg) right top no-repeat; }

 

hi markupdude,

I did try it and sure, the gap was gone.. thanks a lot for doing that.

Actually the original designer designed it like that and i found that my thumbnail under PhotoLog was smaller than that middle column, so I wanted to make it smaller and edited wrapper_bg to add more pink for more content space.

Here, i've changed my bg to yours: http://dragonbond.com
You see there is some space and I wanted to make my content bigger.

Now my problem is, after replacing wrapper_bg with new, I tried editing the div sizes:
#wrapper remained 1000px
#sidebar {
width: 182px;
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
color: #a68aa6;
text-transform: uppercase;
padding-top: 10px;
}
also the same...


but
.sidebar2 {
width: 222px;
float: left;
text-align: center;
padding-top: 10px;
}

to

.sidebar2 {
width: 199px;
float: left;
padding-top: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #a68aa6;
text-transform: uppercase;
}

and add the remaining pixel to content

from
#content {
width: 595px;
float: right;
background: url(images/content_bg.jpg) no-repeat;
}

to

#content {
width: 618px;
float: right;
background: url(images/content_bg.jpg) no-repeat;
}

and I changed the image from 595px and made it bigger to 618px and replaced the one one..

However, when refreshed, my sidebar2 column is smaller, but content column remained the same.. like still 595px.. i have checked all the div containers for content.. there is no 595px anywhere..

 

Ok.

Make

#sidebar width = 180px;

.sidebar2 width = 180px; and

#content width = 640px;

Use this new background image i have attached here. See if that helps.

 

Got it to work, thanks for your help =)