Set Computer Store Template Width

Developers Frontend
1

Hi

I am using the computer store template and it has a width of 990 px…

however, the div “content-tool” and the div “top-tools-container” are extending to the full lenght of the browser



I would like them to be 990px too (same width as the header)



I am trying to make changes to the css but I had no luck



I tried setting the width: 990px; for the content-tool and it does assign it the 990px width but then it appears to be aligned all the way to the left of the browser (check capture 2)



What am I missing in the css settings?



I have attached two captures that hope will explain better my problem



This is a part of the style.css I am working on


.content-tools {
background-color: #cccccc;
border-bottom: 1px solid #c6c6c6;
padding-bottom: 5px;
margin-bottom: 0;
[color=#ff0000]width: 990px;[/color]

}
.content-tools span.float-left, .content-tools span.float-right {
display: none;
}





and this is the part of the style.base.css code that refers to top-tools-container


.top-tools-container {


clear: both;
height: 31px;
padding: 2px 5px 8px;





Can someone help?

store-width.jpg

store-width2.jpg

2

ok try the following (dont look the colors, they are from the original Computer shop!)





.top-tools-container {





background: url(“images/top_tools_bg.gif”) repeat-x scroll left bottom #676767;

margin: 0 auto;

width: 990px;

}

and





.content-tools {





background-color: #F7FCFC;

border-bottom: 1px solid #EDEDED;

margin: 0 auto;

padding-bottom: 5px;

width: 990px;

}



The difference from your solution is that you should always margin them left and right via auto. In that way the divs center them self on the screen, nomatter what resolution you have.



Cheers

3

That made the trick…thank you very much for your reply!

4

dvsgr

even if I set the width to be 990px I still do not get the .top-tools-container and the .content-tools to match the width of the page…please check the attached capture for better explanation



what I noticed in the css file are some other lines that refers to a header-helper-container and the other two blocks i am working on…



[b].header-helper-container [/b]{
padding-top: 4px;
background-color:#ffffff;
}



and this code related to all three blocks…



[b].header-helper-container[/b], .top-tools-helper, .content-tools-helper {
width: 990px;
margin: 0 auto




Do I need to make any changes to the header-helper-container as well?

I tried to set the width of the top-container and the content-tools to less then 990 px but it wont align them with the rest…you would still see a difference in width even if of just few pixels…

Capture-New.JPG

5

Hi,

Can you post me your URL? It's better to see the actual CSS live and then suggest you a solution .

6

Can you please tell me why the width of my homepage is not according to standard width? Please refer the screen shot. It is not auto fitting according to contents.



[sharedmedia=core:attachments:5551]