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.
Related
I am using bootstrap.css and <div class="box">/''HTML content'''/</div>
class=box is div box with white background
I have vertical menu inside <div class="box">/''vertical menu''/</div>
When run the page I don't get the div box covering the full vertical menu.
div box CSS
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;}
and i have added <div id="leftmenu"> inside box
leftmenu css
#leftmenu {
margin-left: 100px;
float: left;
width: 25%;
}
and am listing two div in same row 2 div in same row works but div box does't cover the 2 div
error
div box does't cover the vertical menu
jsfiddle
Add overflow: hidden; to the .box class like this:
JSFiddle - DEMO
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;
overflow: hidden;
}
OR: place your <div style="clear:both"></div> inside the <div class="box"></div> - DEMO
You can add float:left; width:100%; to your code.
.box {
padding: 50px 30px;
background: #fff;
position: relative;
border-radius: 10px;
float:left;
width:100%;
}
JsFiddle is here.
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.
I have 3 buttons, which shall have width according to the width of the button text. This only works with display: inline, but I don't want to have the buttons in a line. How can I list the buttons from top to bottom?
js fiddle
CSS
.wrap{
width: 400px;
height: 100px;
background: red;
}
.button{
display:inline;
background: white;
padding: 0.1rem;
}
HTML
<div class="wrap">
<div class="button">one</div>
<div class="button">two</div>
<div class="button">three</div>
</div>
An easy way is by using floats. Remove the display rule and add:
clear:left;
float:left;
jsFiddle example
.button{
clear:left;
float:left;
background: white;
padding: 0.1rem;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
You only need clear and float left, and remove display on .button.
Then your code stay well:
CSS
.wrap
{
width: 400px;
height: 100px;
background: red;
}
.button
{
clear:left;
float:left;
background: white;
padding: 0.1rem;
}
HTML
<div class="wrap">
<div class="button">one</div>
<div class="button">two</div>
<div class="button">three</div>
</div>
If this is not what you need, let me know
Try:
.button:after{
content: "";
display: block;
}
In the following code, I'd like the #nav div to overlap the #content div. Even though #nav has a higher z-Index value, it is still being overlapped by #content.
FIDDLE: http://jsfiddle.net/Zfcba/
HTML:
<div id="page">
<div id="nav"></div>
<div id="content"></div>
</div>
CSS:
#page
{
margin: 20px 0px;
padding: 10px;
display: block;
width: 70%;
height: 200px;
border: 1px solid gray;
}
#nav
{
float: left;
width: 40px;
height: inherit;
border: 1px solid red;
z-index: 999;
}
#content
{
float: left;
margin-left: -20px;
width: 200px;
height: inherit;
border: 1px solid blue;
background: lightgray;
z-index: 0;
}
Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.
Note: I tried the same without the outer div (http://jsfiddle.net/Zfcba/1). Still the same problem. :(
Add this to your css
#above{position:absolute;}
z-index only works for absolute positioned elements. As the browser ignores the value for z-index, it will then render it in the order the elements are in your html-code. As #content is later in your code than #nav, #content will be displayed over #nav.
Demo: http://jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a div by 50%, and I tried
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
padding-top: -50px;
This does not work too. Any work-around?
line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.
You can wrap the element in another container and position it like so:
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
DEMO
IF you are trying to center the text within the boxes, try the following:
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>