Is this standard CSS behavior?
How does one get the container to wrap around the button?
http://jsfiddle.net/frank_o/yepw7oLw/
CSS:
.button {
background: grey;
padding: 10px 20px;
}
.test {
border: 1px solid black;
}
HTML:
<div class="test">
<a class="button">Test</a>
</div>
This is happening because your a.button element is currently being displayed as inline. Margin and Padding values applied to the top and bottom of inline elements don't impact elements around it, because the browser doesn't want to affect the flow.
To fix this, add display: inline-block to the a.button element.
This will force the browser to treat it as block for all rules regarding styling, and treat it as inline for placement on the page.
Add
display: block;
to .button
Generally I wouldn't recommend adding padding to an anchor <a> tag.
Add the padding and other styles to a <div> instead, with the anchor encompassing that div: JSFiddle
New HTML:
<div class="test">
<a href='#'>
<div class='button'>Test</div>
</a>
</div>
EDIT: in my JSFiddle example above, the width of the grey button defaults to 100% of the container, but you can change this if required by adding a width value to the .test div.
Try adding
display: block;
as suggested and add a width to the button so it is not the full length of your div, e.g:
body {
padding: 20px;
}
.button {
display: block;
width: 4%;
background: grey;
padding: 10px 20px;
}
.test {
border: 1px solid black;
}
Related
Why does scrollbar appears when i remove display: inline-block property from link and is there any another way to avoid scrollbar from appearing
Php file -
<main>
<div class="container">
<h2>Test Your PHP Knowledge</h2>
<p>This is a multiple choice quiz to test your knowledge of PHP</p>
<ul>
<li><strong>Number of Questions : </strong>5</li>
<li><strong>Type : </strong>Multiple Choice</li>
<li><strong>Estimated Time : </strong>4 Minutes</li>
</ul>
Start Quiz
</div>
</main>
body{
font-family: arial;
font-size: 15px;
line-height: 1.6em;
}
.container{
width: 60%;
margin: 0 auto;
overflow: auto;
}
header{
border-bottom: 3px #f4f4f4 solid;
}
footer{
border-top: 3px #f4f4f4 solid;
text-align: center;
padding-top: 5px;
}
main{
padding-bottom: 20px;
height: auto;
overflow-y: auto;
}
What does below property display:inline-block does to avoid scrollbar in main area
Css File -
a.start{
display: inline-block;
color: #666;
background: #f4f4f4;
border: 1px dotted #ccc;
padding: 6px 13px;
}
You can see what happens when you give a background color to the container.
What happens here is that the padding to the <a> does not help increase the height of the container.
.container {
background:tan;
padding:1px .5em;
}
.container a {
padding:1em;
background:#eee;
border:1px solid;
}
<div class="container">
<p>Some text here</p>
<a>Some inline text here</a>
</div>
The system doesn't use the <a>'s padding for the calculations of the container's height, so the container incorporates the line height of the a, but not the bottom padding.
So the <a> overflows out of the container. Its padding does not have any effect on its positioning. (You also see that the top padding of the <a> is inside the bottom margin of the <p>.)
Now if you change the <a>'s display mode to inline-block, the whole picture changes: the padding does count; the container does grow to encompass its padding, and its top padding is no longer intruding on the <p>'s bottom margin.
.container {
overflow:visible;
background:tan;
padding:1px .5em;
}
.container a {
display:inline-block;
padding:1em;
background:#eee;
border:1px solid;
}
<div class="container">
<p>Some text here</p>
<a>Some inline-block text here</a>
</div>
So there are a couple of solutions:
Accept that things are as they are; keep the <a> an inline-block
Remove the overflow:auto, so that the <a> bleeds out of the container. This may affect elements on the screen below the container though
Don't use padding on the <a>
Put some other, block or inline-block, element in the container after the <a>.
So I've got essentially a list of items, that are separated by a border. I'd like to have equal padding and margin applied to the top and bottom of each item.
Here's a fiddle that contains a simplified version of what I'm working with.
Now, you see, I have 10px of margin and padding applied to the top and bottom of each item, but the items aren't evenly spaced. There's more space above each item than below it.
I realize that this is probably a result of CSS's collapsing margins behaviour, and that I could fix it by adding more padding than margin to get the spacing I want.
The issue is, however, that to some items, I want to highlight by adding a background colour, like this fiddle. And when I do, the padding on the top and the bottom must be the same.
So how can I fix this issue? I want it to be super flexible, so I can customize the amount of padding and margin if I like, and also be able to remove the border but still have it display properly.
HTML:
<div class="list">
<div class="item">
<span class="fill"> </span>
</div>
<div class="item">
<span class="fill"> </span>
</div>
<div class="item">
<span class="fill"> </span>
</div>
</div>
CSS:
.item {
display: block;
width: 150px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid red;
}
.fill {
background-color: #aaa;
display: block;
height: 150px;
}
.bg {
background-color: #ccc;
}
Here is a fork of your fiddle
To achieve correct symetrical, vertical spacing, I actually created a 1px div to replace your border:
<div class="myborder"> </div>
with myborder class like so:
.myborder {
heigth: 1px;
background: red;
font-size: 1px;
margin-top: 10px;
width: 150px;
}
The border div is placed in between item divs, like so:
<div class="item">
<span class="fill"> </span>
</div>
<div class="myborder"> </div>
<div class="item bg">
<span class="fill"> </span>
</div>
In item class, I removed the border and margin-bottom attributes:
.item {
display: block;
width: 150px;
margin-top: 10px;
/*margin-bottom: 10px;*/
padding-bottom: 20px;
padding-top: 20px;
/*border-bottom: 1px solid red;*/
background-color:yellow;
}
You will get symetrical, vertical spacing between items as long as myborder's margin-top and item's margin-top attributes are equal.
UPDATE: in the provided, forked fiddle, I also created an invisible border class, as you mentioned being able to remove the border and keep proper spacing:
.myinvisibleborder {
height: 1px;
background: transparent;
font-size: 1px;
margin-top: 10px;
width: 150px;
}
By setting background to transparent, it becomes invisible; another way would be to set height and font-size to 0px;
The reson for problem lies in margin itself. If you are providing a
margin then it will take a blank space from provious element. Now if
you are applying padding means indirectly u are increasing div size.
Here in your problem u can solve this by making top and bottom margin
0 and instead doubling padding in ".item" class as follows:
.item {
display: block;
width: 150px;
**margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 20px;
padding-top: 20px;**
border-bottom: 1px solid red;
}
this will look perfect without touching to other code segments!
The problem is the way you are seeing things. The padding and margins are all equal, but you can't see them that way as you only have a bottom border. If you add a top border (red like the bottom one), you can see that the spacing is exactly the same between the items.
Now if you want to fix your problem, you have to take into account that you only have one border, so you can remove one of the paddings or margins.
Edit: Replace your css code with the following and you should achieve what you want:
.item {
display: block;
width: 150px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid red;
}
Edit 2: I just realised that because of your highlighting in your second example, you'll run into another problem. So you'll probably have to take out the red line from the divs and put them into a separate entity.
Edit 3: Here's a jsfiddle with updated, hope it does what you want.
If I have a container, with several nested divs :
<div class="beat-container" id="beat-container-1">
<div id="1-1">
<div class="beat" id="beat-1-1">
I am a beat View<br>
</div>
</div>
<div id="1-2">
<div class="beat" id="beat-1-0">
I am a beat View<br>
</div>
</div>
<div id="1-3">
<div class="beat" id="beat-1-0">
I am a beat View<br>
</div>
</div>
</div>
and I use float on all but the last child, I get the functionality I need, where they are side by side. Adding float:left to the final one prevents the enclosing parent container from wrapping all the children, and it loses its height.
If I add it to all them, then try to add a :last-child it still doesn't work.
How do I get the divs to be inline, and have the parent border still wrap them.
The container height should be dynamic, so no specific height attributes or JS.
CSS:
.beat-container {
border: 1px solid orange;
padding: 5px;
margin: 5px;
}
.beat {
display: inline-block;
border: 1px solid purple;
float: left;
}
.beat :last-child {
float: none;
}
/* .beat :not(:last-child) {
display: inline-block;
border: 1px solid purple;
float: left;
} */
Fiddle
I hope I have understood your questions correctly.
You can add overflow: auto; to .beat-container then it will wrap the content.
.beat-container {
border: 1px solid orange;
padding: 5px;
margin: 5px;
overflow: auto;
}
http://fiddle.jshell.net/g3L3w/2/
If you want to use the last-child selector to target the last div with .beat you have to target the parent of .beat as all .beat are both first-child and last-child of the parent in your current structure.
e.g. .beat-container > div:last-child > .beat
You can go with a less qualified selector for your example but in a bigger context it would probably be what you want.
http://fiddle.jshell.net/g3L3w/4/
I am coding a page with a banner at the top which should contain a series of buttons. The following code works in all but the buttons are taking a new line when they should appear side by side. I know that div automatically takes a new line and that I should use span, but when I do it doesn't stretch the banner to fit the button like it does with a div. I have tried using several variations of float but to no avail.
<style type="text/css" media=screen>
body{
margin: 0px;
padding: 0px;
color: #000;
font-family: helvetica, times;
font-size: 14px;
}
#wrapper{
position: absolute;
height: 100%;
width: 100%;
text-align:center;
}
#banner{
background: url('images/banner_background.png');
position: relative;
margin: 0;
width: 100%;
color: #FFFFFF;
z-index: 3;
}
#banner #button {
padding:10px;
margin:auto;
position: relative;
background: url('images/button.png');
height: 100%;
z-index: 4;
width:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner">
<div id="button">
dfsdfsfdsdfs
</div>
<div id="button">
sddfdfdsf
</div>
</div>
</div>
To have the padding still work on an inline element like a span, you would have to set it to display: inline-block - it will still be in the text flow, unlike block elements, but accept width/height, padding and margin the same way an image does. Images are inline-blocks by default.
CSS:
#banner .button {
display: inline-block;
padding:10px;
margin:auto;
position: relative;
background: url('images/button.png');
height: 100%;
z-index: 4;
width:100px;
}
HTML:
<span class="button">
sddfdfdsf
</span>
<span class="button">
sddfdfdsf
</span>
Important: IDs are unique to a single element. If you have multiple buttons, use classes. I adjusted that as well.
Make your <div>-s inline-block - DEMO
Also ID-s should be unique.
And if you need buttons, then you have to use the <button> tag - it just makes more semantic sense. And it can be styled anything you want - DEMO
You should use display: inline for a div rather than using a span.
div set the display to be block by default, while span to be inline. You can't set padding or margin values to span because it is designed to be used in a lighter way (e.g., underline or italic for some words). So it's better to use div if you can do so and set attributes like display: inline to meet with the special needs.
<style>
div {border-radius:5px;background:#cccccc;}
span {display:block;}
</style>
<div>
<span>First line</span>
<span>Second line</span>
</div>
I want each span to fit inside the div with rounded corners, but they go in front of the div and obscure the rounded corners. If I put rounded corners on each span then you can see a faint outline of each span, even if they have the same background-color as the div.
try overflow:hidden on the div? or give it a z-index of 1000
alternative to #AlexC's answer:
<style>
div {border-radius:5px;background:#cccccc;}
span {padding:0px 5px;display:block;}
.topspan {padding:5px 5px 0px 5px;display:block;}
.bottomspan {padding:0px 5px 5px 5px;display:block;}
</style>
<div>
<span class="topspan"></span>
<span>First line</span>
<span>Second line</span>
<span class="bottomspan"></span>
</div>
see here
If you give the div a padding you will push the content from the borders of the div so they will never overlap. This usually looks nicer anyway.
div {
border-radius: 5px;
background: #ccc;
padding: 5px;
}
span {display:block;padding:0px 10px;}
Click here
You can't add add border radius for span, bcoz span is default display:inline in type.
So you need to change display:block or display:inline
all credit goes to:
http://www.cssstylekit.com/CSS-Border-Radius.html
<style>
.demo-border-radius {
width: 100px;
height: 100px;
border-radius: 30px;
border: 2px solid #000;
overflow: hidden;
}
</style>
<div class="demo-border-radius">border radius div</div>