I am trying to apply margin to specific child div 2*"#child2"* but it applies margin to parent div too. Problem is margin collapse.
<div id="parent">
<div id="child1" class="child">hello1</div>
<div id="child2" class="child">hello1</div>
<div id="child3" class="child">hello1</div>
</div>
CSS
#parent{
overflow:auto;
padding-top: -1px;
margin-top: 1px;
}
.child{
margin:0 30px;
display:inline-block;
background-color: #5395ce;
padding: 5px;
}
#parent{
background-color: #000;
}
#child2{
margin-top: 15px;
}
Here is the code: http://jsbin.com/nibaw/5/edit?html,css,output
Define your your .child class vertical-align:top;
.child{
vertical-align:top;
}
Get rid of
#child2 {
margin-top: 15px;
}
which is adding 15px top margin.
Related
I have a div inside another div and I want this second div to ignore the padding, the second div to have full width and no margin bottom. How can I make it work?
#first {
padding: 10px;
border: 1px solid #000;
}
#second {
background-color: red;
color: #fff;
}
<div id="first">
first div with 10px padding
<div id="second">
no padding
</div>
</div>
Inner element can compensate parents padding by using negative margin.
#second {
background-color:red;
color:#fff;
margin: -10px;
}
http://jsfiddle.net/n5yx8903/1/
wrap text in p or span tag
<div id="first">
<p>first div with 10px padding</p>
<div id="second">
no padding
</div>
</div>
set margin for element wrapping text, this will be the cleanest solution.
https://jsfiddle.net/n5yx8903/
Set margin-left and margin-right to -10px.
#second{
background-color:red;
color:#fff;
padding: 0;
margin-left: -10px;
margin-right: -10px;
}
Here is Fiddle.
Well CSS is not intended to do this,
you may do this with negative margin, but as you see in the fiddle, it will then overflow:
http://jsfiddle.net/n5yx8903/6/
#first{
padding:10px;
border:1px solid #000;
}
#second{
background-color:red;
color:#0ff;
margin:-10px;
}
Maybe this SO answer will help you understand this problem better:Why does CSS not support negative padding?
That is not doable in CSS. I think when that happens there are two options you can do.
Use negative margin to compensate the padding
Restructure the HTML
I would choose the latter one whenever possible and use negative margin as a fallback option.
#container {
border: 1px solid #000;
}
#first {
padding: 10px;
}
#second {
background-color: red;
color: #fff;
}
<div id="container">
<div id="first">
first div with 10px padding
</div>
<div id="second">
no padding
</div>
</div>
You can just put "first div with 10px padding" text into another div:
#first {
border: 1px solid #000;
}
#second {
background-color: red;
color: #fff;
}
#inner {
padding: 10px;
}
<div id="first">
<div id="inner">
first div with 10px padding
</div>
<div id="second">
no padding
</div>
</div>
You can just switch the divs
#first{
border:1px solid #000;
}
#second{
background-color:red;
color:#fff;
padding:0px 10px;
}
<div id="first">
<div id="second">
first div with 10px padding
</div>
no padding
</div>
I have a side by side 50% divs. Under I have a content div where I have applied a margin-top 60px. That margin is not working.
<div class="sbs50">
Left Side
</div>
<div class="sbs50">
Right Side
</div>
<div class="content-section">
Content Section
</div>
Css
.sbs50
{
float: left;
width: 50%;
}
.content-section
{
margin-top: 60px;
border: 1px solid green;
}
I tried adding the following but is not working
.sbs50:after
{
content:'';
display:block;
clear: both;
}
How can I fix the margin not working?
Here is my fiddle
Just add the margin to the bottom of the sbs50 class and clear the floats for .content-section class. Like this:
.sbs50 {
float: left;
width: 50%;
margin-bottom:50px;
}
.content-section {
border: 1px solid green;
display:block;
clear: both;
float:none;
background:#ccc;
}
See fiddle
Alternative:
Use the typical clear method, basically you add a div which clears every float. So your HTML looks like this:
<div class="sbs50">Left Side</div>
<div class="sbs50">Right Side</div>
<div class="clearfix"></div><!-- added div -->
<div class="content-section">Content Section</div>
and your CSS like this:
.sbs50 {
float: left;
width: 50%;
}
.clearfix {
display:block;
clear: both;
float:none;
}
.content-section {
border: 1px solid green;
margin-top:200px;
background:#ccc;
}
See fiddle for this example
This is a more common approach since you simply clear elements and then style the subsequent elements as you wish, but you can use any of these approaches and they will work equally well
This works:
.content-section {
margin-top: 20px;
border: 1px solid green;
float: left;
width: 100%;
}
but I am not sure if you want to set the width yourself.
Given HTML:
<div id="title">Text</div>
<div class="circlecontainer">
<div class="circle">Hello</div>
</div>
And CSS:
div {
display: inline-block;
}
.circlecontainer {
background: #E0E;
text-align:center;
line-height:200px;
width:200px;
height:200px;
}
.circle {
width:100px;
height:100px;
border-radius: 50px;
font-size:20px;
color:#fff;
background:#000
}
.circle:hover {
width:200px;
height:200px;
border-radius: 100px;
}
JSFiddle: http://jsfiddle.net/S329D/4/
I would like the black circle to be vertically centered when not hovered over.
But when I set vertical-align:middle, the text looks screwed up:
http://jsfiddle.net/S329D/5/
Why does this happen?
It's because the line-height is still 200px. Try this:
div {
display: inline-block;
}
.circlecontainer {
background: #E0E;
text-align:center;
line-height:200px;
width:200px;
height:200px;
}
.circle {
line-height: 100px;
position: relative;
vertical-align: middle;
width:100px;
height:100px;
border-radius: 50px;
font-size:20px;
color:#fff;
background:#000
}
.circle:hover {
width:200px;
line-height: 200px;
height:200px;
border-radius: 100px;
}
http://jsfiddle.net/S329D/7/
If you remove the border-radius the box is not centered, so the circle is not centered too
You need to work with the margin-top. I've edited your fiddle
Simply add a span tag inside the circle div element with style "vertical-align: middle;" and remove the "vertical-align: middle;" of the circle class.
<div class="circle">
<span style=" vertical-align: middle;">Hello</span>
</div>
The problem is because of the height of the circle class change also affect the text element. With the span, it does not.
I'm trying to get the "item" links inside the "menu" to stay inside the "navWrapper"/"navContent" when the browser is resized.....yet when I decrease the width of the browser window they keep staying off to the right outside these divs....any ideas on how to keep them all contained inside the nav area?
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/logo.png"></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
Hopefully this is what you are looking for:
http://jsfiddle.net/disinfor/7XFsH/
HTML
<div id="navWrapper">
<div id="navContent">
<div id="logo">
<img src="assets/logo.png" />
</div>
<!-- #logo -->
<div id="menu">
<div class="item">dadada
</div>
<div class="item">dadada
</div>
</div>
<!-- #menu -->
</div>
<!-- #navContent -->
</div>
<!-- #navWrapper -->
CSS
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:100%;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
.item {
float:left;
position:relative;
padding-left:10px;
}
.item a {
color:white;
}
It also makes the navContent responsive.
if you keep the menu with a fixed width that is going to happen always.
I suggest you to dig into mediaqueries so, depeding on the screen resolution, are the styles you might set.
Also you can try by setting the navContent like this:
#navContent {max-width:950px;} /* instead of width */
And remove the width in the #menu, is not required if is floated.
This way the nav is not going to be wider than its containers (be sure there are no containers with a fixed with).
I insist, if you want to be very accurate on the result, try by appliying mediaqueries.
Here some documentation and a cool tool to detect what resolution you are viewing [link]
This method is only recommended if your header does not have an expanding height (ie, if the navigation isn't supposed to wrap
Give the container a min/max width, but let it use "auto" as the actual width. The minimum will allow users on small screens/devices to scroll over and use your navigation, rather than letting it spill off screen and potentially out of the box. It still goes off-screen, but in an expected way. (tip: use an #media query to change the menu layout on those small screens)
#navWrapper {
width: auto;
max-width: 960px;
min-width: 560px;
}
Position the #navContent so that it is relative and does not have a width. This will let you position children elements relative to this div. Note that you must specify a height for this container as well, but you have already done that in your CSS
#navContent {
position: relative;
width: auto;
}
Now position the elements that should appear in the menu. Don't bother with margin or padding for the original elements. Use absolute positioning. Get it perfect.
The magic, you can attach this to the right of the menu.
#navContent #logo {
position: absolute;
top: 15px;
left: 30px;
/* Used to reset your CSS */
margin: 0;
}
#navContent #menu {
position: absolute;
top: 15px;
right: 30px;
/* Used to reset your CSS */
display: block;
float: none;
margin: 0;
}
For the navigation, I suggest the .item classes be inline, and the links be floated blocks. This means the "items" won't be much more than a wrapper, and the links can be given a background or borders without the strange "deadzone" between them. Padding on navigation links is great for usability & touch devices.
#navContent #menu .item {
display: inline;
}
#navContent #menu .item a {
display: block;
float: left;
/* padding, background, border... go nuts */
}
You don't need to clear the navigation in this case, since the #menu is positioned absolutely it won't affect other elements to begin with.
try this
html
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/doityourweb-logo.png"/></div></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
css
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:left;
padding-left:8%;
display:inline-block;
border: 1px solid #ffffff;
margin-right:50px;
margin-top:15px;
}
.item{
display:inline-block;
}
http://jsfiddle.net/U6B8x/
P.S i dont know where you want to close your #navContent so check and tell
I have a three divs and I am giving them absolute positioning. However, they are not staying inside my container div.
Here is the code:
<body >
<div id="container">
<div id="col1"> testing one</div>
<div id="col2"> testing two</div>
<div id="col3"> testing three</div>
<br/><p/>ksjdlfkjsldkjfl;s
Here is the CSS for my three divs and my container:
div#container {
position:reletive;
border-spacing: 10px;
margin: 100px 80px auto;
padding: 0 100px10px;
background-color: #EEEEEE;
width: 800px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border: 1px solid;
}
div#col1{
position:absolute;
float: left;
left:0;
width:220px;
background-color :red;
}
div#col2{
position:absolute;
float: left;
left:220px;
width:220px;
background-color :yellow;
padding: 10px auto ;
}
div#col3{
position:absolute;
float: left;
left:500px;
width:100px;
background-color :green;
padding: 10px auto;
}
I think, firstly, the position of container div should be "relative" , not the "reletive".
Secondly, I think you should use "relative" position instead of "absolute".