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 :/
Related
How to set fit-content for width in right side. I used fit-content value for width and every things Okay in left side, but in right side content put in center of page. I use this CSS for make dynamic width by content:
.chat li.right .chat-body {
margin-right: 60px;
border: 1px solid $c-grey;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
margin-left: 20%;
max-width: 80%;
width: fit-content;
}
It's my chat example:
CodePen Example
Replace with my give code.
.chat li.left .chat-body {
margin-left: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-right: 20%; */
max-width: 80%;
width: fit-content;
float: left;
}
.chat li.right .chat-body {
margin-right: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-left: 20%; */
max-width: 80%;
width: fit-content;
float: right;
}
and:
.chat li small.pull-left {
padding-left: 60px;
padding-top: 5px;
clear:both;
}
.chat li small.pull-right {
padding-right: 60px;
padding-top: 5px;
clear:both;
}
Working Demo
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/
See: fiddle
When the window is long enough, both divs are in the same line, but when it's smaller, the second div(.footers) moves to a new line. I wan't them to be in the same line all the time.
Css from the left div:
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
Css from the right div:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
}
What is causing this problem?
If you only want to give the left div (.footer_links) a fixed height, instead of floating the div on the right (.footers), give it overflow:hidden. This will cause it to fill the remaining width of the page:
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
JSFiddle
.footer .footer_links {
float: left;
width: 20%; // In percent
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer .footers {
text-align: left;
float: left;
width:70%; // In percent
padding: 0px 20px 0px 20px;
}
You can add to a .footers div a white-space , and fixed height:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
white-space: nowrap;
height: 20px;
}
try this give max-width:
DEMO
CSS
footer {
background: #f2f2f2 !important;
margin-top: 20px;
padding: 10px 0px 10px 0px;
}
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer a {
font-size: 14px;
color: #898989 !important;
}
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
.footer .footers p {
font-size: 14px;
color: #898989;
line-height: 20px;
}
.clear{
clear: both;
}
in DEMO2 you have write max-width: then its working
DEMO2
CSS
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
max-width:300px;
}
I am trying to make a parent div fit it's width to an image displayed. I am having a lot of trouble in doing so, it seems to auto adjust to very large.
Image: http://puu.sh/1vsqA
content is the body part
image is the white box the image is contained in
image img is the actual image inside the box itself.
CSS:
html, body
{
margin:0;
padding:0;
border:0;
height:100%;
width:100%;
}
body
{
background-image: url('./page_bg.gif');
background-repeat: repeat;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
}
#navlinks
{
width: 100%;
height: 28px;
line-height: 28px;
background-color: #000;
color: #FFF;
}
#links
{
list-style-type: none;
float: left;
padding-left: 5px;
margin: auto;
}
#links li
{
float: left;
padding-left: 5px;
padding-right: 5px;
}
#content
{
display: block;
padding: 40px 40px 40px 40px;
}
#image
{
display: inline-block;
border: 1px solid #CCC;
border-color: #CCC #AAA #AAA #CCC;
padding: 3px;
margin-left: auto;
margin-right: auto;
background: #fff;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
max-width: 1107px;
}
#image img
{
}
You could try setting #image to display: inline-block. I could be wrong but I 'think' that's what you're looking for.
Here is a link example: http://jsfiddle.net/RBWYL/
Please try to float:left your parent div
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.