I dunno what's wrong with my css, but I can see only 50-60% of right border of left sidebar navigation. How to resize it to fit full container height?
Here is the image of sidebar navigation
And link http://www.smiths-heimann.az/?page=2
There is a huge padding-bottom in your container div which is 373px. I guess you have to recheck the design. A quick solution can be to reduce this padding to 354px.
You have a big mess with margins and paddings.
You should remove min-height on #wrap. Remove the negative margin-top on the #footer, the padding-bottom on the #container and just work on the padding-bottom of the .content
try setting you content div to "height:100%"
Related
I'm modifying a responsive Wordpress theme. At smaller viewport sizes, there is ~10 pixels of space between the edge of the main wrapper div and the right edge of the viewport. Take a look: http://bit.ly/1mt2s0D
How do I make it go away? HTML, body, and wrapper divs are all set to 100% width. Padding and margin are set to 0.
Other people have had this issue, but their solutions haven't worked for me. Here's one: Can't get a div background colour to fill full width of viewport.
Thanks.
Your div .topright has a padding-right set to 5px which is pushing it out past the bounds of the wrapper. At smaller viewports it is 5px wider than everything else.
I have a DIV which will contain the content for a website of mine. On the left side there is a menu which has its position set to float. When I re-size my browser the container gets under the box and it looks quite bad.
This is how it looks like:
I have tried to put all the relevant HTML and CSS in this fiddle: http://jsfiddle.net/Dugi/qZ67C/
How would I make the DIV container have itself getting smaller against the floating menu and not get under it?
You can set the .container to float left, and then increase the margin-left until it is out from under it. You could also shrink the width of the .container. Both worked while I was playing with the fiddle, but you'll have to adjust your table.
Here is the fiddle, with .container floated left, and a margin-left big enough to slide it out.
Here is the fiddle, with a smaller .container width.
The challenge is that you have percentage width on .sidebar, but also a min-width.
One solution is to place a min-width on .outer. This will prevent .content from slipping under .sidebar. as it down-sizes, but will cause .outer to overflow the viewport and induce a scrollber when the viewport is sized below 750 (minus .outer margin) pixels.
Here's your fiddle with the simple change of setting min-width on .outer to 750px: http://jsfiddle.net/qZ67C/5/
if I want to center content on my page, I can simply apply margin: 0 auto to it.
But that makes zero margins. How can I do if I want a minimum of, say, a couple ems of margin on the right and left.
thanks
Wrap the content in a div with margin.
You can set a width to the div which you are wrapping your content,and apply margin
You'll need to apply padding or margin to the parent element.
I'm trying to create a layout where the header is fixed and the middle header div is aligned with the content div.
I got two issues:
There is a small offset that I can't fix.
The border-top of content-wrapper is not visible, why?
Fiddle: http://jsfiddle.net/sxZJ3/3/
Offset and no border-top:
The offset is due to you setting a padding: 5px on a width: 100%.
The reason you can't see the border-top is because of the border-bottom on the #header, which gives it an extra 1px of height, for a total of 61px. I would decrease the height to 59px, thereby yielding a total height of 60px.
Edit: Here's an updated fiddle
Easy fix is to replace width: 100%; with right:0; left: 0;: http://jsfiddle.net/sxZJ3/14/
if you remove the padding there is no issue, The main content is floating directly below the header. If you want to decrease this gap you could use padding or a variety of other options. Margin or even use the single border for both elements inline.
Could also try some positioning tricks. Div inside a container with a postition:relative and a fixed-height. Then on the div position:absolute and then margins and padding as necessary.
I would recommend a build more along these lines where you remove the body margin and allow the content-wrapper to be the sole margin pushing down the content. Also the padding within the header is causing the #menu to be offset by 5px within the header element. http://jsfiddle.net/sxZJ3/12/
I have an element with width 100% of the body and i need to be able to give it padding in pixels. every attempt i had at it ended up adding scrolling. i can't use overflow:hidden because i need to have vertical scrolling, and overflow-x/y isn't fully supported yet.
so how can i add fiexed padding to an element with a 100% width?
Try using this:
<body>
<div style="width:auto; background-color:#333333;height:100%; padding:10px; color:#FFFFFF;">
Example
</div>
</body>
I do not encourage you to use inline styling
If you give padding to body (which is 100% by default), it will increase the width of the page and add scrollbars.
You need to create a DIV within body and work in it.