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.
Related
Some wise guy has written the following code and it works (Text centered with two lines on both sides).
h1 {
width: 90%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #000;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .5em;
}
<h1>Text Centered</h1>
But I dont understand how the value -55% of margin-left and margin-right is calculated. If you change that to something else, it wont work.
OK, I'll give this a shot.
Each of the pseudo-elements is 50% wide of the heading...but since there are inside the heading (which would normally be one line...it breaks
See:
h1 {
width: 90%;
margin: .7em auto;
text-align: center;
font-weight: 300;
color: #000;
border: 1px solid red;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {}
<h1>Text Centered</h1>
Well we don't want that...so we push each of them off to one side by adding the negative margins.
h1 {
width: 90%;
margin: .7em auto;
text-align: center;
font-weight: 300;
color: #000;
border: 1px solid red;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -50%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -50% 0 .5em;
}
<h1>Text Centered</h1>
However, the lines are now sticking out of the box...and we don't want that. We solve this by adding overflow:hidden to the heading.
h1 {
width: 90%;
margin: .7em auto;
text-align: center;
font-weight: 300;
color: #000;
border: 1px solid red;
overflow: hidden;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .5em;
}
<h1>Text Centered</h1>
As for why 55% specifically I can't say other than it shoud be higher than 50% to ensure the line doesn't break when the element gets narrow.
The -55% are moving the elements to the right and left by 55% of the width of the h1 element, and the 0.5 em up by half the size of the text. Since the added elements have a border bottom, this is now in the vertical middle of the h1 and slightly outside the h1 (by 5% of the width of the h1: 50% =half plus 5%). BTW, it does work with other values, here's the same changed to -60%:
h1 {
width: 90%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #000;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .5em 0 -60%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -60% 0 .5em;
}
<h1>Text Centered</h1>
My code is suppose to make a two-column layout, the header at the top, footer at the bottom, navigation at the left column in between the top and bottom, and finally the main at the right column. The problem is that the main is overlapping with the navigation column.
Here is the CSS for my file:
body { background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
margin-left:180px;
padding: 0px 20px 180px 0px;}
header { background-repeat: no-repeat;
height: 100px; }
h1 { white-space: nowrap;
overflow: hidden;}
h2 { color: #003366; }
h3 { padding-top: 10px;
color: #006600; }
nav { float: left;
width: 150px;
font-weight: bold;
font-size: 1.2em; }
nav a { text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px; }
nav a:link { background-color: #003366; }
nav a:visited{ background-color: #48751A; }
nav a:hover { border: 3px inset #333333; }
nav ul { list-style-type:none;
margin: 0;
padding-left: 0; }
dd { font-style: italic;
font-size: .90em;
height: 200%; }
.contact { font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif; }
.floatleft { float: left;
padding: 0 20px 20px 0; }
.clear { clear:left; }
footer { font-size: .60em;
clear:both;
margin-left: 180px;}
img { border-style:none; }
#wrapper { background-color:#FFFFCC;
min-width: 700px;
max-width: 960px;
padding: 0px 0px 20px 30px;
border: 1px ridge blue;
width: 80%;
margin-right: auto;
margin-left: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;}
header, nav, main, footer {display:block;}
Here is one of my html5 files:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="prime.css"/>
<title>Prime Properties :: Financing</title>
</head>
<body>
<div id="wrapper">
<header>
<h1><img src="primelogo.gif" width="650" height="100" alt="Prime Logo"></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Listings</li>
<li>Financing</li>
<li>Contact</li>
</ul>
</nav>
<main>
<h2>Financing</h2>
<p>We work with many area mortgage and finance companies.</p>
<h3>Morgages FAQs</h3>
<dl>
<dt>What amount of morgage do I qualify for?</dt>
<dd>The total basic monthly housing cost is normally based on 29% to 41% of your gross monthly income<dd>
<dt>Which percentage is most often used?</dt>
<dd>The perecentage used depends on the lending institution and type of financing.</dd>
<dt>How do I get started?</dt>
<dd>Contact us today to help you arrange financing for your home</dd>
</dl>
</main>
<footer>
Copyright © 2014 Prime Properties<br>
Paul Clef Ube
</footer>
add this:
main{
float:left;
width:calc(100% - 150px);
}
I have added the new width (you might want to add a fallback) so the main always fit with your fixed sized nav (plus the padding on the wrapper)
Got the issue worked out. Just played around with your code a bit, thought you may find it useful.
Though calc() is tempting, it's not necessarily the best choice due to compat issues.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
}
header {
position: relative;
background: #003366 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/worldmap.png) no-repeat center 35%;
height: 100px;
margin-left: -21px;
margin-right: -21px;
overflow: hidden;
}
header img {
position: absolute;
top: 0;
left: 24px;
bottom: 0;
right: auto;
margin: auto;
display: inline-block;
max-width: 140px;
height: 65px;
}
h1 {
padding-left: 55px;
font-size: 25px;
line-height: 100px;
color: white;
}
h2 {
margin-bottom: 5px; color: #003366;
}
h3 {
margin: 2px 0px 6px;
padding-top: 15px;
color: #006600;
}
nav {
float: left;
display: inline-block;
margin: 0;
padding-top: 20px;
width: 150px;
font-size: 1.2em; }
nav a {
display: inline-block;
width: 100%;
text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px;
margin: 2px 0;
}
nav a:link {
background-color: #003366;
}
nav a:visited {
background-color: #48751A;
}
nav a:hover {
border: 3px inset #333333;
}
nav ul {
list-style-type:none;
}
dt {
}
dd {
display: inline-block;
margin: 4px 0 10px 18px;
line-height: 1.2;
font-style: italic;
font-size: .90em;
height: 200%;
}
dt:first-child {
margin-top: 15px;
}
.contact {
font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif;
}
.floatleft {
float: left;
padding: 0 20px 20px 0;
}
.clear {
clear:left;
}
footer {
font-size: .60em;
width: 100%;
clear: both;
}
img {
border-style: none;
}
#wrapper {
background-color: #FFFFCC;
width: 80%;
min-width: 700px;
max-width: 960px;
padding: 30px 20px 15px;
border: 1px ridge blue;
margin: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;
}
main {
padding: 20px 0px 20px 20px;
display: inline-block;
width: 100%;
max-width: 77%;
}
I see you have a class "floatleft", but you never assign it to anything.
Try giving your elements locations. For instance if you wanted something to float left tell it how from from the left it should go. In your CSS you may trying something like this in .floatleft{ float: left; left: 10px}. .floatright{ float: right; right: 10px;}.
I have this JsFiddle, and I can not figure out why the buttons extend outside of the divs.
How can I get them to be inside of the divs?
Here is the CSS
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
Here is the HTML:
<div class="left-nav">
<div>new story
</div>
<div>My Stories
</div>
</div>
You can specify display:inline-block; on the buttons, so the div expands to hold the anchors completely.
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
display:inline-block;
}
Fiddle
div.left-nav > div {
overflow: auto; /* removed clear: both; */
width: 100%;
border: solid 1px red;
}
div.left-nav > div > a {
display: inline-block;
}
http://jsfiddle.net/ZjvZu/10/
Hey hope this works for you : -
demo
<div class="left-nav">
<div class="btn">new story
</div>
<div class="btn">My Stories
</div>
CSS:-
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 8px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
.btn{
padding:8px 15px 8px 15px;
}
Alright, so I have searched the Internet, I have looked at at the very least twenty different posts on this site, and spent several hours with this issue and either I am blind, or perhaps rustier at this than I thought. I have two divs within a wrapper- the left div is float:left, and I want to space them apart from one another, but when I add padding or margin to the left side of the right div nothing happens. If I manually add space using the code for space, it pushes the paragraph down rather than over. I am at a loss, I tried using inline-block display, I tried floating the right paragraph. The only thing that sort of worked was adding right padding to the left box, but because the content in the left box is centered it then messed up the display of the left box. I uploaded the site contents so you could see what I am talking about, and the stylesheet is pasted below. Any help with this would be greatly appreciated! I usually just use tables and iframes, but I got yelled at for that so I was trying to do this the "right way" (I guess?) for a friend. http://www.djcproductions.net/GSFlook/
/* CSS Reset */
* { margin: 0; padding: 0; }
body {
font-family:Tahoma, Geneva, sans-serif;
background-color:#282828;
}
#container {
width: 1024px;
height: 1200px;
background-image:url(../images/body_bg.jpg);
background-repeat: repeat-x 0 0;
margin: 0 auto;
padding: 0 2px;
}
#header {
width: 1024px;
height: 88px;
}
#nav {
clear: both;
height: 34px;
width: 1024px;
background-image:url(../images/nav_bg.jpg);
}
#nav ul {
float: left;
}
#nav ul li {
display: block;
float: left;
height: 34px;
list-style-type: none;
padding: 0 1px 0 0;
}
#nav ul li a {
color: #ffffff;
display: block;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 100%;
line-height: 34px;
padding: 0 0 0 18px;
}
#nav li a span {
display: block
float: left;
height: 100%;
padding: 0 18px 0 0;
}
#nav li a:hover, #nav li.active a {
background: url(../images/atab.jpg) no-repeat center;
color: #fff;
cursor: pointer;
text-decoration: none;
}
#homegallery {
width: 1024px;
max-height: 302px;
padding: 37px 0 0 49px;
}
#preview_box{
width: 390px;
height: 236px;
background-image:url(../images/preview_bg.jpg);
background-repeat:no-repeat;
padding: 24px 0 0 0;
}
#preview_shadow{
width: 390px;
height: 236px;
background-image:url(../images/filler.png);
float: left;
padding: 0 0 0 0;
}
.shadow{
-moz-box-shadow: 2px 5px 5px 1px #ccc;
-webkit-box-shadow: 2px 5px 5px 1px #ccc;
box-shadow: 2px 5px 5px 1px #ccc;
}
#content{
padding: 118px 0 0 33px;
}
#scroller{
background-image:url(../images/scroller_bg2.jpg);
background-repeat:no-repeat;
position: relative;
width: 202px; /*marquee width */
height: 267px; /*marquee height */
overflow: hidden;
padding: 0 0 0 0;
float: left;
}
#scroller_content{
width: 98%;
position: absolute;
padding: 20px 0 0 0;
}
#scroll{
font-family:Tahoma, Geneva, sans-serif;
color: #8f8f8f;
}
#scroll li{
padding-top:5px;
list-style-type:none;
}
#company_info{
font-family:Tahoma, Geneva, sans-serif;
color: #000000;
width: 90%;
padding: 0 0 0 0;
}
p {
font-family:Tahoma, Geneva, sans-serif;
text-indent: 30px;
line-height: 25px;
}
The div
<div id="company_info">
Is not floating, but the div to the left of it with id=scroller is.
For a quick solution, you will need to make #company_info:
#company_info {
float: left;
width: 70%;
margin-left: 20px;
}
Also make sure to clear float after those two divs!
You didn't post HTML so I made my own markup, with the parameters you were looking for:
HTML
<div class="container">
<div class="left">
<p>Services</p>
</div>
<div class="right">
<p>Our company</p>
</div>
CSS
p {margin-left: 30px; font-family: Arial, sans-serrif; color: #FFF;}
.container {
margin: 0 auto;
width: 620px;
height: 400px;
padding: 10px;
background: #CCC;
}
.container .left {
margin: 0 auto;
float: left;
width: 300px;
height: 390px;
background: #999;
}
.container .right {
margin: 0 auto;
float: right;
width: 300px;
height: 390px;
background: #666;
}
jsFiddle
I am not very good at this I know some but I am having some issues with my CSS I can not figure out.
My mainContent ID overlaps with under my Sidebar ID. I am sure I messed up my css trying to fix this but I have no idea how to fix t his. I have changed things so many times I have become lost.
Any help would be nice.
#charset "utf-8";
body {
background: #A00;
margin: 0;
text-align: center;
color: #A00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
float: right;
}
.twoColHybLtHdr #header {
background-image:url(img/background3.png);
padding: 12px;
background-repeat: repeat-x;
background-position: left;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 14em;
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #sidebar1 h3, {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
}
.twoColHybLtHdr #footer {
padding: 50px 8px;
background:#FFFF99;
background-color: #FF9;
}
.twoColHybLtHdr #footer p {
font:Georgia, "Times New Roman", Times, serif, 10px;
margin: 0;
padding: 10px 0;
border-color: #666666;
}
.fltrt {
float: right;
margin-left: 10px;
}
.fltlft {
float: left;
margin-right: 10px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColHybLtHdr #table {
font:
margin: 0;
padding: 10px;
color: #FFF;
y background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
Make sure you specify a width on BOTH the .fltrt and .fltlft columns
Your css should look like this:
/** Assuming the parent element (container) is 940px wide **/
.fltlft {
float: left;
width: 540px;
}
.fltrt {
float: right;
width: 380px;
}
Also, make sure you replace/remove **y** with .y and remove that unused **font** attribute.
Not sure what's happening as there isn't a visual on whats actually happening.
.twoColHybLtHdr #sidebar1 h3, {
Just remove the , and all should be good
The bottom there is a few errors.
.twoColHybLtHdr #table {
**font:**
margin: 0;
padding: 10px;
color: #FFF;
**y** background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
I'm guessing it should be more like
.twoColHybLtHdr #table {
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 10px;
color: #FFF;
.y{
background-color: #8B0000;
background-color: #A00;
border: #A00;
}
Take the float right off of the container
put a float left on the main content
add a div after the main content that clears both.
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
******** removed Float:right;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 210px; ****** Change this to pixels unless you are specifying the font-size as !important otherwise you could have problems with this width scaling unintentionally.
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
float: left; ****** Added float left to mesh it with your sidebar float right would work as well but wouldn't mesh it with your floated sidebar.
}
*********** add another div after your mainContent and assign it the ID="clear"
.twoColHybLtHdr #clear {
clear: left;
}
There are some other errors in your css but I think these are the ones where you are having your problems.