Content get overflowed hidden when navigating to previous comments, please see the links.
Example:
http://justfortest.cba.pl/misc/index.html (full content displayed)
http://justfortest.cba.pl/misc/index.html#comment-3 (content is cut to anchor link)
I discovered that when I remove overflow: hidden; from .content>div then content is not overflowed, but then the design is destroyed: problem with background and too long div.
after removing overflow: hidden; (problem with div length and background).
justfortest.cba.pl/misc/index2.html#comment-3
Updated:
Here is the code for content part:
.content {padding: 40px 0; border-top: 5px solid #e3e4e6; border-bottom: 1px solid #d8d8d8; background: url("images/bg.png");}
.content>div { width: 980px; margin: 0 auto; border: 1px solid #d8d8d8; background: #fff;}
.main {float: left; overflow: hidden; width: 610px; margin-bottom: -5000px; padding: 15px 35px 5030px;}
.sidebar {float: right; width: 260px; margin-bottom: -5000px; padding: 15px 19px 5030px; border-left: 1px solid #e8e8e8; background: #fafbfc;}
Could you please help with that problem?
Any help will be appreciated.
Kind regards
try this
.main {
float: left;
margin-bottom: 0; /* from -5000px */
overflow: hidden;
padding: 15px 35px 30px; /* from 15px 35px 5030px */
width: 610px;
}
Related
I'm trying to understand why when I use the clear and float properties on a fourth div, it is not floating above the first element I floated. And the first three elements have floats to the left?
Also why is the .main is allowing the .aside to float underneath the second floated element? PLEASE SOMEONE HELP. (I also took a picture of it in browser view)!
.main {
background-color: #f7f4f4;
width: 600px;
padding: 20px;
margin-right: 140px;
margin-left: 20px;
box-shadow: 10px 10px 10px #705656;
border-radius: 10px;
border: 2px solid red;
float: left;
}
.shot {
border: 2px solid black;
width: 400px;
background-color: #8bed8f;
float: left;
}
.aside {
background-color: #f47575;
width: 400px;
border-radius: 4px;
margin-bottom: 20px;
float: left;
}
.trac {
border: 2px solid black;
width: 400px;
background-color: blue;
float: left;
clear: left;
}
I'm having issues with getting this code player in progress to look proper:
http://invigorateme.net/viperbox.html
When I hover over a list item (the list items are the four tabs on top), the background changes, but it doesn't fill the space for the two on the sides. I was trying to learn from another source code, but I just couldn't get the tweaking quite right, and am still having issues.
The Question: How can I make it so when you hover over a list item, the background changes and fits the background?
If you go to my site link, you'll see what I mean when you hover over one of these elements. It simply changes color, but not as I expected.
Here's the relevant CSS behind it, let me know if it's horrendous and what I can do better, I'm still learning:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
border: 2px solid #B7B7B7;
border-radius: 10px;
margin: 0px auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0px auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0px;
padding: 7px 5px 0px 5px;
border-right: 2px solid #B7B7B7;
}
#codetabs li:hover{
background-color: grey;
}
If anyone thinks I might have left out any important code or info, let me know that as well. I didn't believe the HTML was necessary.
Basically your problem is that your list items are all rectangles that are contained in a pill shaped box (id="codetabs"). If you want the background color to fill each button, you're going to need to use some pseudo classes (:first-child and :last-child) to specify border radius values on your first and last li items.
This is the working CSS:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
margin: 0 auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0 auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0;
padding: 7px 5px 0px 5px;
border-width: 2px 2px 2px 0;
border-color: #B7B7B7;
border-style: solid;
}
#codetabs ul :first-child {
border-radius: 10px 0 0 10px;
border-left-width: 2px;
}
#codetabs ul :last-child {
border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
background-color: grey;
}
http://jsfiddle.net/d09xgfzc/1/
I am working on a simple redesign for a project I did awhile back, just for practice. I have a left column that remains a certain size no matter what I seem to do. When the content in the main area becomes too great, the left column looks cut off. How do I get this column to extend with the content of the page? Here is the css I have for my containers and the column:
#outerWrapper {
background-color: #fff;
margin: 0 auto 0 auto;
min-width: 760px;
text-align: left;
width: 80%;
}
#outerWrapper #header {
background-color: #8ab573;
border-bottom: solid 1px #628152;
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #eef6ed;
border-right: solid 1px #8ab573;
float: left;
padding: 10px 10px 10px 10px;
width: 24%;
height: auto;
}
#outerWrapper #contentWrapper #content {
margin: 0 0 0 26%;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper .clearFloat {
clear: left;
display: block;
}
#outerWrapper #footer {
background-color: #eef6ed;
border-top: solid 1px #8ab573;
padding: 10px 10px 10px 10px;
Thanks for any suggestions, I know it's really simple I'm just having code block I guess :/
I'm having difficulty getting a div containing text to reduce it's width in order to wrap nicely next to an image that's floated right. The text inside the div is behaving as I would like it to but the grey div is stretching behind the image.
The div/box is part of a wordpress shortcode plugin. I don't know whether that is complicating matters
Here is the css for the elements in question
Image:
.circular-image-right img {
border-radius: 50%;
clear: both;
display: inline;
float: right;
height: 300px;
margin: 0 30px 60px;
width: 300px;
}
Div:
element.style {
text-align: left;
width: 100%;
}
.symple-box.gray {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #DDDDDD;
color: #666666;
}
.symple-box {
-moz-box-sizing: border-box;
border-radius: 2px;
display: block;
font-size: 1em;
margin: 10px 0;
padding: 30px 15px 5px;
}
The page in question can be seen here:
http://c3927181.myzen.co.uk/
http://jsbin.com/iLAMuXoc/5/edit?css,output
.symple-box.gray {
padding: 16px 30px;
margin: 0 360px 0 0;
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #DDDDDD;
color: #666666;
}
I have made a 3 column widget area on Wordpress, however it appears that there is padding. Ive amended the margin, however its still not resizing the widget area to fit inside my "sidebar".
This is my site:
www.mammacoil.com
This is my CSS
#footer-widgets {
display: block;
width:950px;
margin-left:-50px;
background: #000000;
}
#footer-widget1 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
#footer-widget2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
#footer-widget3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
THIS IS NOW RESOLVED
You have used id footer-widget1 twice, which isn't valid HTML.
I recommend taking the id off the inner #footer-widget1 and applying a different style.
This will resolve your padding issue.