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;
}
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 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 :/
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;
}
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.