This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
I've got some simple HTML code in which I am building the basic layout for a simple website.
I am trying to position the red bar to be vertically centered inside the green area. For some reason, it will not move down when I add a top margin. I've been trying to figure out why for a half hour - so frustrating!
Here's the JSFiddle: http://jsfiddle.net/Hut9M/
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic</title>
</head>
<body>
<div id="milestone">
<div id="milestonecontent">
<div id="event">
</div>
</div>
<div class="actions">
</div>
</div>
</body>
</html>
And the CSS:
#body{
background-color: #e9eaed;
}
#milestone{
width: 512px;
height: 137px;
background-color: blue;
}
#milestonecontent{
width: 512px;
height: 104px;
background-color: green;
}
#event{
position: relative;
margin: 10px auto;
width: 512px;
height: 58px;
background-color: red;
}
.actions{
border-top: 1px solid #e9eaed;
position: relative;
width: 512px;
height: 33px;
background-color: grey;
}
You could make it an inline-block element as #AfromanJ suggested or you could:
2) add a padding-top to the wrapping element #milestonecontent
3) add a 1px or more transparent border: 1px solid transparent; to the wrapping element #milestonecontent .....but the
REAL SOLUTION
is to add a overflow:auto to the wrapping element #milestonecontent
Fiddle: http://jsfiddle.net/Hut9M/12/
Code:
#milestonecontent{
width: 512px;
height: 104px;
background-color: green;
overflow: auto;
}
Solved also in here: CSS: Margin-top when parent's got no border
You can add display: inline-block; to your #event DIV.
#event {
display: inline-block;
margin-top: 23px;
}
Demo
A block element like div has width:auto by default. you can give padding-top to parent milestonecontent and margin:0 auto; to event container which will keep'em centered across all resolutions.
a little glimpse of what i have modified,
#milestonecontent{
height: 104px;
padding-top:20px;
background-color: green;
}
#event{
margin: 0 auto;
width: 300px;
height: 58px;
background-color: red;
}
Working Demo.
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I have 2 files: 1 is .html file and another file is .css file
and here are their content:
#left,
#right {
display: inline-block;
}
#left {
width: 15%;
height: 550px;
margin-bottom: 100px;
margin-left: 10px;
border: 1px solid black;
}
#right {
width: 80%;
margin-left: 25px;
}
#header {
width: 100%;
height: 100px;
border: 1px solid black;
}
#content {
width: 100%;
height: 500px;
border: 1px solid black;
margin-top: 10px;
}
#footer {
width: 100%;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
#menu {
width: 100%;
height: 50%;
background-color: red;
}
<div id="left">
</div>
<div id="right">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
If I add 1 <h1> element inside #left or #header, #footer, #content then their position move down.
I don't know why it happens. Please help.
The browser is adding default margin and padding to the h1 element (likely on the top) that is affecting the parent element. Go to the browser and click on inspect element. This will show you the default value. You can then specify the values in your code according to your need.
I want the green div to be below the blue div instead of on top of it without changing either of their position values and using pure css only.
http://jsfiddle.net/LpjgLydv/40/
Is this possible?
Assumptions:
I may use inline css only
This is for a footer that needs to stay at the bottom regardless of how much content is on the page
Any other element on the page besides the footer (and html,head,body) may or may not exist at any given time
The footer is nested in <body> and cannot be placed anywhere else
I figured it out. Basically I had to add a relative position and a min-height to the html attribute as well as a margin-bottom to the body attribute:
http://jsfiddle.net/LpjgLydv/44/
html
<html>
<head>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
css
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 250px;
}
.box
{
border: solid 10px blue;
position: relative;
height:900px;
width:380px;
margin-top: 5px;
margin-left: 8px;
}
.box2
{
border: solid 10px green;
position: absolute;
bottom:0px;
left:8px;
height: 180px;
width: 380px;
}
It now meets the criteria of all of the assumptions in the question.
You can use this without positioning.
.inner-box
{
border: solid 10px blue;
height:900px;
width:380px;
margin-top: 5px;
float:left;
}
.inner-box2
{
border: solid 10px green;
float:left;
bottom:0px;
height: 180px;
width: 380px;
clear:both;
}
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
I have a div as a content box and have another div inside that for the title. The outer div has border-radius set but the inner div hides it.
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
}
JSFiddle: http://jsfiddle.net/AAUbA/
How do I fix it so I can see the rounded corners at the top of the outer?
Use overflow: hidden on your #box element:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
overflow: hidden
}
See the updated Fiddle here: http://jsfiddle.net/AAUbA/2/
As an aside: it's worth considering adding in vendor-prefixes to ensure better cross-browser compatibility.
This is a good write-up on how to use the property.
You can use this tool to auto-generate the CSS you need.
Give #boxTitle the same radius on both the top corners as the box. As already suggested you can also set the overflow to hidden with overflow:hidden;. Both working but if you want to add something outside of #box it won't be displayed, with this code it will be displayed:
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
JSFiddle demo
add overflow: hidden on your #box element.
This question already has answers here:
Top-align text within button element?
(4 answers)
Closed 9 years ago.
I got the following situation:
jsfiddle
<button type="submit">
<div class="icon"></div>
</button>
button {
width: 250px;
height: 250px;
background: orange;
padding: 0px;
border: 1px solid black;
display: inline-block;
position: relative;
}
.icon {
width: 150px;
margin: 0px auto 0px auto;
height: 80px;
display: block;
position: relative;
background: pink;
vertical-align: top;
}
I want the div inside a button at the top.
If I use negative top the other element inside the button are not exact after the first div element. if i set the icon-div with vertical-align top nothing happens.
Why is it always in the middle? how can i get this on top?
If i use an a-tag instead of a button with the same rules i does not get this problem.
Any idea?
I got two ways let me know if those work
.icon{
position: absolute;
top: 0;
left: 45px;
}
or
.icon{
position: relative;
top: -85px;
}
You're not supposed to put <div> inside of a <button>, it's not a valid document.
Replace <button> with <div> and then it works as expected (JSFiddle):
<div type="submit">
<div class="icon"></div>
</div>
And CSS:
div[type="submit"] { // Only change here, to properly match div instead of a button
width: 250px;
height: 250px;
background: orange;
padding: 0px;
border: 1px solid black;
display: inline-block;
position: relative;
}
.icon {
width: 150px;
margin: 0px auto 0px auto;
height: 80px;
display: block;
position: relative;
background: pink;
vertical-align: top;
}