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
Related
I just tried to create nested elements, but the inner element (subcategory) gets always bigger, then the parent element (category).
Please have a look at this JSFiddle:
JSFiddle: http://jsfiddle.net/d7vhpcmt/
HTML:
<div id="content" class="clearfix">
<section class="category boxed">
<section class="box_1"><header class="trigger trigger_aktiv"><h2>Category</h2></header>
<div class="content">
<section class="box_1 boxed"><header class="trigger"><h2>Subcategory</h2></header>
<div class="content"></div>
</section>
</div>
</section>
</section>
</div>
CSS:
.category {
background-color: #f8f8f8;
padding: 20px;
margin-bottom: 10px;
width: 100%;
max-width: 1600px;
float: left;
margin-right: 10px; }
.category a {
color: #262626;
text-decoration: none;
border-bottom: 0;
background-color: transparent;
display: block;
width: 100%; }
.category h1 {
font-size: 2.0em;
margin: 0 0 0.5em 0;
font-weight: 300;
line-height: 1em;
color: #262626;
letter-spacing: -1px; }
.box_1 {
background-color: #E9E9E9;
margin-top: 5px;
border: 1px solid #E2E2E2;
display: block;
width: 100%; }
.box_1:hover {
background-color: #eee; }
.box_1 header {
padding: 5px 0 0 50px; }
.box_1 .content {
background-color: #f2f2f2;
height:100%;
padding: 0.2em 0 0 0; }
.box_1 .content p { margin: 0.5em 0.8em; }
.box_1 .content h3 {
font-size: 1.2em !important;
margin-left: 0.3em; }
.box_1 .content .box_1 {
margin: 5px; }
It's because you have given .box_1 it a width of 100% and .content .box_1 and margin of 5px; this means your box is going to be 100% + 10px - instead of using margin try add padding to the parent container, this way you don't need to keep adding 5px margin to all it's children:
.box_1 .content {
background-color: #f2f2f2;
height:100%;
padding: 0.2em 5px 0 5px;
}
Example
If you are not worry about IE8 then use calc in your box_1 class.
.box_1 {
background-color: #E9E9E9;
margin-top: 5px;
border: 1px solid #E2E2E2;
display: block;
width: calc(100% - 10px);
}
DEMO
The problem is in this piece of code:
.box_1 .content .box_1 {
margin: 5px;
}
You are applying a margin around the entire section containing the Subcategori. Just edit in this way:
.box_1 .content .box_1 {
margin: 5px 0;
}
In order to remove the margin right and left.
Here is the JSFiddle.
I'd like to know how to make my wrapper use percentage and grow/shrink with the width of the page instead of staying in one fixed size? I do not want the page to be cut off when I zoom in, would anyone help me with this please, thanks :)
here is a link to the entire phpbb stylesheet
https://gist.github.com/25c59943b244a3e150e8/75c6dd240980864d4872eb6cacccdf980fa9d84c
/* Main blocks
---------------------------------------- */
#wrap {
background-color: #080808;
padding: 0 0px;
min-width: 650px;
width: 960px;
margin: 0px auto;
border: 1px solid #161616;
background-repeat: repeat-x;
background-attachment: fixed;
}
#middle {
padding: 0 0px;
min-width: 650px;
width: 900px;
margin: 0px auto;
}
#header_1 {
background-image: url("http://i57.tinypic.com/m81pc0.jpg");
height: 170px;
width: 960px;
}
#menus {
height: 40px;
border-top: 1px solid #161616;
border-bottom: 1px solid #161616;
background: url() repeat-x;
}
#simple-wrap {
padding: 6px 10px;
}
#page-body {
margin: 4px 0;
clear: both;
}
#page-footer {
clear: both;
}
#page-footer h3 {
margin-top: 20px;
}
#logo {
float: left;
width: auto;
padding: 10px 13px 0 10px;
}
a#logo:hover {
text-decoration: none;
}
My fiddle: http://jsfiddle.net/f5e5d/1/
.item-data {
width:34px;
height:34px;
background-size: 34px auto !important;
margin: 2px;
border: 1px solid #000;
display:table-cell;
}
.test_div {
background-color: #eee;
width: 100%;
padding: 20px;
}
.match_details {
display:table-cell;
}
I want to show only 3 pictures in one line. How can I do it?
Now I have displayed all 6 items in 1 line.
Thanks in advance!
Like this: http://jsfiddle.net/NicoO/f5e5d/4/
.item-data {
width:34px;
height:34px;
background-size: 34px auto !important;
margin: 2px;
border: 1px solid #000;
float: left;
}
.item-data:nth-child(3n+1)
{
clear: left;
}
.test_div {
background-color: #eee;
overflow: hidden;
padding: 20px;
}
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.