This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Why does adding text do a div change the margin [duplicate]
(2 answers)
Closed 5 years ago.
I want to have 2 divs inside another one but the with different margin-top, every time I try to set the margin-top of the first one the second one aligns according to the first one. Let's say that first and second are two divs inside another div. I would like something like this:
second
first
But I'm getting this:
this second
You can have a clearer idea maybe visiting this fiddle
Flexbox to the rescue!
#wrapper {
display: flex;
}
.divF {
margin-top:20px;
}
/*Border added for demo so you can see what's happening*/
#wrapper { border: 1px solid #777; }
.divF, .divS { border: 1px solid #CCC; }
<div id="wrapper">
<div class="divF">
<p>first</p>
</div>
<div class="divS">
<a href=#>second</a>
</div>
</div>
Try vertical-align: top; Check the code below.
.divF{
display:inline-block;
margin-top:20px;
vertical-align: top
}
.divS{
display:inline-block;
vertical-align: top
}
<div>
<div class="divF">
<p>
first
</p>
</div>
<div class="divS">
<a href=#>second</a>
</div>
</div>
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 1 year ago.
I have an element that can be any size. I need to set the child element to fill the remaining space. I wrote a little demo of my problem.
https://www.w3schools.com/code/tryit.asp?filename=GPOS93IXT6E7
.random-size{
height:200px;
width:100px;
padding:10px;
background-color:grey;
}
.container-fill{
background-color:red;
height:100%;
}
<div class="random-size">
<div class="container-fill">
hello world
</div>
</div>
Outputs:
This is correct for the output for now but if I add another child element
https://www.w3schools.com/code/tryit.asp?filename=GPOSB2B28A0I
<div class="random-size">
<div>uh oh</div>
<div class="container-fill">
hello world
</div>
</div>
The output is now:
As you see there is out of bounds content. I can't use overflow:hidden due to content will be displayed at the bottom. I tried using grids/tables but I could not figure it out. I don't want to resort to using calc.
If you can use display: flex, I'd like to recommend it.
.container{
width: 300px;
padding: 16px;
height: 400px;
background: gray;
display: flex;
flex-direction: column;
}
.box{
background: red;
flex-grow: 1;
}
<div class="container">
<p>some string</p>
<div class="box">
BOx
</div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Center flex items with one at the end of the row [duplicate]
(3 answers)
Closed 3 years ago.
I have a div that contains two divs inside. First div has to be aligned to the left , second div has to be
aligned to the center relatively parent div.Please could you help me .Here is my jsfiddle : https://jsfiddle.net/armakarma/zy3L9a7h/
html
<div class='test'>
<div class='logo'>logo</div>
<div class='title'> title </div>
</div>
css
.test{
display:flex;
border:1px solid black;
}
.title{
margin: 0 auto;
}
.logo{
width:160px;
border:1px solid red;
}
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have 2 div elements I want centered in my page. The outter div is 100% width and text-align: center. Like so:
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
The two elements contained within it should appear next to each other but centered (they're both simply divs with text content). Simply put, I want a centered title on my page, each of the two words of the title being a seperate div. I read that you do the following to accomplish this:
float: left;
clear: none;
As far as I can tell, the 'clear' does not have any visible effect. When I add the float: left, to the first of the two elements, it simply causes that element to slide all the way to the extreme left of the outer .centerpanel while the element that follows it remains out in the middle where it should be. So it's definitely aligning it properly but inexplicably sends it all the way to the left.
How do I make it stay vertically aligned with it's following element but keep obeying the outer div's text-align: center?
If I understand your question correctly, something like this is what you want to have. And of course there are more than one ways to skin a cat.
HTML:
<div class="centerpanel">
<div class="left">L</div>
<div class="right">R</div>
<div class="clearfix"></div>
</div>
CSS:
.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.centerpanel div{
width: 50%;
}
.left{
float: left;
}
.right{
float: right;
}
.clearfix{
clear: both;
}
jsFiddle: http://jsfiddle.net/nfpdpmze/2/
Since there are only two divs here, you could also set them display: inline-block without using any flotation.
Side note:
There are of course more modern ways of clearing floating. One of them is by setting up the overflow property on the container of the divs that get floated. More about that here: https://css-tricks.com/all-about-floats/
You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.
HTML:
<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>
CSS:
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}
Here you go:
<div style="display:flex">
<div style="text-align:center">
<span>Content1</span>
</div>
<div style="text-align:center">
<span>Content2</span>
</div>
</div>
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some divs lined up horizontally and the content in the div is pushing it out of line with the others. How can I make them line up regardless the amount of content? I intend to add overflow:hidden so large content will not destroy the layout. No javascript involved. Needs to work in IE9+ and chrome.
MARKUP
<div class="panels">1</div>
<div class="panels">2</div>
<div class="panels"><img src='\images\img.png' height='64px'></div>
<div class="panels">4</div>
CSS
.panels {
/*line-height:200px; */
display: inline-block;
width:22%;
height: 200px;
margin:5px;
border: 1px solid blue;
}
I have a fiddle
Another saturday stolen by work. :(
Use vertical-align: top on .panels.
http://jsfiddle.net/y9pEV/2/
This question already has answers here:
How to use vertical align in bootstrap
(8 answers)
Closed 8 years ago.
I have a very simple problem on vertical middle a span using Bootstrap 2.3.2.
Requirements:
There are two columns, left column has a fixed height 300px because there is 300x300 image inside.
Right column has text and must be centered based on left column.
The whole thing must be responsive. That's why I am using responsive image.
If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column.
Must not use JS to solve this.
HTML:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<img class="img-responsive" src="http://placehold.it/300x300"/>
</div>
<div class="span6 v-center">
<div class="content">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
CSS:
.v-center {
display:table;
border:2px solid gray;
height:300px;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
}
My code: http://jsfiddle.net/qhoc/F9ewn/1/
You can see what I did above: I basically set the second column span as table and middle the .content table-cell. I copied that method here How to use vertical align in bootstrap (with working example here http://jsfiddle.net/lharby/AJAhR/)
My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.
Add !important rule to display: table of your .v-center class.
.v-center {
display:table !important;
border:2px solid gray;
height:300px;
}
Your display property is being overridden by bootstrap to display: block.
Example
.row {
letter-spacing: -.31em;
word-spacing: -.43em;
}
.col-md-4 {
float: none;
display: inline-block;
vertical-align: middle;
}
Note: .col-md-4 could be any grid column, its just an example here.