I have some boxes in HTML but one of the boxes is getting shifted from its place. Here is JsBin Demo
HTML
<div id="summary">
<div class="box"><span>Average fill time</span></div>
<div class="box"><span>Listing</span></div>
<div class="box"><span>Archive</span></div>
<div class="box"><span>Views</span></div>
<div class="box"><span>Submissions</span></div>
</div>
CSS
.box {
height: 60px;
width: 80px;
display: inline-block;
text-align: center;
padding: 20px;
border: 1px solid;
margin: 10px;
}
Screenshot
PS: I know this is happening due to three words in the box. Setting overflow-y: hidden fix this problem. But I want to know why is this happening at first place ?
Example code : http://jsbin.com/elOdOpa/1/edit
Add vertical-align: top to your .box elements (since vertical alignment is baseline by default and the current alignment is shown as in the picture below
You could change display:inline-block; to float:left;.
JSBin
Related
Is there is any way to use margin auto to center the elements without erasing the older values of the margin top and bottom? notice that they are unknown.
I tried to make the margin left and right auto and it worked, but I want to know if there is any way to do it in one line, something you can write instead of 0 that keeps the older value
<style>
.test {
display: block;
margin-left: auto;
margin-right: auto;
background-color: grey;
width: 200px;
}
</style>
<div class="test">this is test div</div>
It does work here but is there is any way to do it using margin by writing in the margin top and bottom a value that keeps the older value without knowing it?
Create another div and put your code into this.. Please check below:
I have removed margin css.
.test {
display: inline-block;
background-color: grey;
width: 200px;
}
<div style="text-align: center;">
<div class="test">this is test div</div>
</div>
you can try this
<style>
.parent {
display: flex;
justify-content: center;
}
.test {
background-color: grey;
width: 200px;
}
</style>
<div class="parent">
<div class="test">this is test div</div>
</div>
The asnwer is no, you cant do that. You are using the one and only correct way of doing so.
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
I'm pretty new to the front-end materials so bear with me
while I try to explain the question.
I'm having an issue trying to align three boxes together side by side.
However, when I try to add the <p> tag within the box, a top margin
gets added. Here is what I mean.
<div class="work-box">
<div class="box">
<div class="idea">
</div>
<p>Hello World</p>
</div>
<div class="box">
<div class="idea">
</div>
</div>
<div class="box">
<div class="idea">
</div>
</div>
</div>
As you can see, the boxes are wrapped within the "work-box" class. Here is the CSS code.
.work-box {
text-align: center;
}
.box {
margin-top: 30px;
display: inline-block;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
.idea {
height: 50%;
background: url('img/idea.svg') center no-repeat;
background-size: contain;
}
I have been struggling with this issue for this whole entire day and I just cannot figure it out. Please help!
Thank you so much.
Solution: Add vertical-align: top to your .box class.
Explanation: The effect that you saw was because for all inline elements, the vertical-align is defaulted to baseline.
This behaves funny when you have inline elements inside of your .box. Because it will try to align the last inline element to the baseline of all your inline elements.
Try adding vertical-align:middle; to the box class.
.box {
margin-top: 30px;
display: inline-block;
vertical-align:middle;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
See Codepen Example here .
You try using <span>Hello world</span> instead of <p> tag. Moreover, <p> tag is out of .idea div. Is it ok? I think it should be inside of <div class="idea">
I would like to create a div container with fixed width and height of 100px and it should work like a window.
Then in addition
It should have content divs into it next to each other 'floating' left, not breaking into a new line.
The container should hide all what is longer as it width or height.
Do I have to use
overflow:hidden
?
fiddle here:
container and content
http://jsfiddle.net/hd8Bm/1/
Here is a sample HTML structure:
<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
Here is what the CSS needs to be like:
#container
{
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid #000;
overflow: auto;
white-space: nowrap;
}
.content
{
width: 50px;
height: 50px;
display: inline-block;
border: 1px dashed #000;
}
Here is a working fiddle:
http://jsfiddle.net/HB8kB/
The trick is done by white-space: nowrap;
This is what you want.
http://jsfiddle.net/hd8Bm/9/
display:inline was not necessary.
OK, if you want to hide something, or prevent it from being clicked, position:absolute may work, on newer browsers, I mean. float:left is sometimes helpful, too.
I know its extremely simple, but I have been coding all day and it doesn't seem to work.
I want the text to be vertically centered inside the box.. What am i doing doing?
http://jsfiddle.net/UAyNh/
UPDATE:
That worked for the text, but the buttons wont center. Check it out on Safari vs. Chrome.
http://jsfiddle.net/Bz9pB/
I give a container line-height equal to its height.
eg.
div.box
{
line-height: 40px;
height: 40px;
}
The only other way I know is to either use a table or replicate a table with CSS:
<div class="table">
<div class="row">
<div class="cell">
text
</div>
</div>
</div>
And
div.table{ display: table; }
div.row{ display: table-row; }
div.cell
{
display: table-cell;
vertical-align: middle;
}
Use line-height and make that equal to the height of the element (so long as your element only has one line, anyway):
height: 25px;
line-height: 25px;
JS Fiddle demo.
If the text will be on one line and the height of that line is similar to that in your example, you can solve it by setting the line-height:
height: 25px;
line-height: 25px;