I have this menu page that I want to split into 5 equal columns.
My current CSS for the yellow divs is:
width:20%;
height:100vh;
background-color: yellow;
display:inline-block;
Above this, I also have margin:0;. How can I remove the small white gap between the yellow blocks?
Using display inline-block has the weird sideeffect that it creates unwanted gaps between elements: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
A quick fix would be to float the div's left instead of using display: inline-block.
div {
width:20%;
height:100vh;
background-color: yellow;
float: left;
}
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
Related
How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.
I have this CSS:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/
What I want to do here is:
the red div must be exactly as wide as the 3 blue divs in its first row
the red div must be centered within the green div
javascript must be avoided
no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)
First of all, if you want to center an Element you need to make it:
display: block;
width : %/px;
margin-left: auto;
margin-right:auto;
If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.
such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/
Theres two conflicting issues here.
1)You must have a set width in order to do margin-left/right auto.
2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.
In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!
try this for to your inner and see what happens.
.inner{
width: 250px;
margin: 0 auto;
background-color: red;
}
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
You can see the fiddle here: http://jsfiddle.net/easeS/4/
Here is the html/css I have:
#main div
{
float:left;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
}
<div id="main">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
I'm not sure why but it bumps the third div down to a new line instead of hiding it. Any suggestions?
The 3rd div bumps down because there's not enough space for it to float.
Your 3 divs added up together (inc. margin) is equals to 120px;
The wrapper (#main) is 100px.
Therefore bumping the 3rd div down.
If I understood your question correctly...
What you want to do is hide it the 3rd div, for you to do this, you'd need to:
Add another wrapper div and give it a bigger width. Have a look at my example here
No need to add extra wrapping divs...
Try this instead:
#main div
{
display:inline;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
white-space: nowrap;
}
Just changed the float rule to display: inline on the divs and added white-space: nowrap to #main.
Is because your divs in your div#main are confined only to those dimensions specified in the style of div#main. To float to infinity and beyond, they need to have a space where to float. You can wrap your divs in a container with a very high height.
Try with this demo.
I have two divs, inline. One displays a measurement, the other displays a unit value. The text in each is currently aligned correctly.
I would like to display a bar stretching across the top of the measurement value, but no further. Note: for various reasons, I can't use text-decoration: overline. Instead I am trying to display a background image behind the text, clipping to the width of the text (not the div).
I have tried using display:table; on the measurement div, and this works, but it has the affect of screwing up my div layout (the text is not aligned between the divs).
Here's some example html:
<div class="measurement">1234</div><div class="unit">mm</div>
Here's some example css:
.unit {
display:inline-block;
}
.measurement {
display:inline-block;
background-image:url(overline.png)
width:200px;
text-align: right;
}
Does anyone know of a way I can clip the background image to the width of the displayed text?
Just use a border instead of an image:
.measurement {
display:inline-block;
border-top:1px solid #000000
}
How about changing the divs to spans and wrapping the measurement span in a div to space it to the desired width?
HTML:
<div class="spacer"><span class="measurement">1234</span></div><span>mm</span>
CSS:
.spacer{
width:200px;
display: inline-block;
text-align: right;
}
.measurement {
background-image:url(overline.png);
}
See this jsFiddle for a working example.
(background-color should work the same as an image).
I want to achieve this:
width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
| div2 |
|-----------------------------------|
Sample html on jsFiddle.
Is it possible to place two divs side-by-side leaving the second div with all remaining space?
Just float the first div, and set the margin-left of the second div to accommodate the width of the first div. Something like this:
div.one {
width: 60px;
float: left;
}
div.two {
margin-left: 60px;
}
Keep in mind that the width CSS property on the div only applies to the content, so you need to set the margin-left to be the sum of the width, border, margin, and padding properties of the first div.
Here is the updated version of your jsfiddle. Let me know if you have any questions about it.
Here it is:
CSS:
#container { background: silver; width: 100% }
.image
{
background: green; color: green;
width: 60px; height: 60px;
float: left;
}
.content
{
background: blue; color: white;
margin-left: 60px;
}
And on jsFiddle (It's playing up at the moment)
Hope this helps!
Here is how it will be done :
.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}
.content {
background:blue;
color:white;
margin-left:60px;
}
Try this:
<html>
<head>
<title>Tabla de contenidos - Template</title>
<style type="text/css">
div {
border: 1px solid #000000;
}
#divleft{
width: 60px;
float: left;
}
#divright{
display: block;
margin-left: 62px;
}
</style>
</head>
<body>
<div id="divleft">This DIV has a width of 60px.</div>
<div id="divright" >This DIV occupies the rest of the page...</div>
</body>
</html>
The 62px margin is to avoid overlap the 1 extra px of each border.
another option is to use the flexible box model
this working proposal is supported in recent firefox, chrome, and safari.
it can be ported to unsupported browsers using flexie.js.
there is new way to arrange elements whit CSS3
Check here this page Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!
Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.