I'm making a template, and I'd like to have a div that his height gets to the top of another div. A screenshot that explains it a bit:
This is my CSS:
.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.column {
margin: 0 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 720px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}
And HTML:
<div class="row">
<div class="column grid_9"><p><img src="img/bomb.gif" style=" margin-bottom: 10px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px;">
</p></div>
</div>
<div class="row">
<div class="column grid_3"><p style="line-height: 222px;">TEST</p></div>
<div class="column grid_6"><p>post</p></div>
<div class="column grid_6"><p>post</p></div>
<div class="column grid_6"><p>post</p></div>
</div>
<div class="row">
<div class="column grid_3"><p>footer</p></div>
<div class="column grid_3"><p>footer</p></div>
<div class="column grid_3"><p>footer</p></div>
</div>
jsFiddle link
jsFiddle
<div class="row">
<div class="column grid_9">
<img src="img/bomb.gif" style="margin-bottom: 10px; padding: 5px;">
</div>
</div>
<div class="row">
<div class="column grid_3"><p style="line-height: 222px;">TEST</p></div>
<div style="overflow: hidden">
<div class="column grid_6"><p>post</p></div>
<div class="column grid_6"><p>post</p></div>
<div class="column grid_6"><p>post</p></div>
</div>
</div>
<div class="row">
<div class="column grid_3"><p>footer</p></div>
<div class="column grid_3"><p>footer</p></div>
<div class="column grid_3"><p>footer</p></div>
</div>
Just use .grid_6{float: right} and it should work.
Update:
A practice that I use is that I wrap such three divs in another div. I would do something like
<div style="overflow: hidden">
<div style="float: left">TEST</div>
<div style="float: right; overflow: hidden">
<div>POST</div>
<div>POST</div>
<div>POST</div>
</div>
</div>
I guessed:
.grid_3 {
position: relative;
z-index: 100;
}
This answer was originally by Eric:
jsFiddle working
If you want to align the last post to the right, you can do a couple things
float:right; //may require parent to also float
text-align:right; //to parent container
right:0px; // need to change position first I believe
margin-left:auto; // should push it to the right all the way
margin-left:123px; //fixed amount
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
I am trying to order some divs, the idea is that I want to be able to offset them relative to each other to create asymmetrical grid.
All of it is working, until the moment content is added inside.
When a content is added into a div, that div is moved and positioned relative to the content inside it, so that the content is at the top left of the div, I am expecting the opposite behaviour, the div should not move, and the content should move relative to the div.
NOTE: I can not use an outside container to wrap all of them in it.
.column{
width: 49%;
height: 200px;
position: relative;
display: inline-flex;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="column red">
<p>
This breaks it
</p>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
If possible you could achieve the expected behavior by wraping the content inside another div and positioning it using position: absolute
.column{
width: 49%;
height: 200px;
position: relative;
display: inline-flex;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.column > div {
position: absolute
}
<div class="column red">
<div>
<p>
This breaks it
</p>
</div>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
Why don't you use the old pal float. I still use it over flex and grid often. much easier when simple layouts-
* {box-sizing:border-box;}
.column{
width: 50%;
height: 200px;
float:left;
position:relative;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="column red">
<p>
This breaks it
</p>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
Note: I add box-sizing rule becouse I hate that width:49%
I have this HTML and CSS:
.container {
width: 100%;
}
.group {
display: flex;
justify-content: space-between;
min-width: 214px;
background: #eee;
}
.abbr {
/* some styling */
}
.name {
/* some styling */
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div>
Now, if I use just min-width, the whole div stretches as the entire width of the container. If I just use width, it won't expand if the name is longer than Mark Smith (rather it will go to the next line).
This is what I wanted to achieve:
How do I achieve this in flexbox?
What you're looking for is to apply width: fit-content to .group.
Then you can adjust the offset between the abbreviation and name with min-width on the .abbr.
This can be seen in the following:
.group {
display: flex;
width: fit-content;
background: #eee;
margin: 10px 0;
}
.group > div {
margin: 0 10px;
}
.abbr {
min-width: 50px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">A Really Really Long Name</p>
</div>
</div>
</div>
I use inline-block on .container so that it won't take up the whole line.
.container {
display: inline-block;
}
.group {
display: flex;
background: #eee;
}
.abbr {
padding: 0 7px;
}
.name {
padding: 0 7px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div><br/><br/>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div>
<p class="name">Loooooooooooooooong Name</p>
</div>
</div>
</div>
Another solution is to use a third element that consume all the remaining space and set the background color on the text content only:
.container {
margin: 0 0 5px 0;
}
.group {
display: flex;
}
.abbr {
padding: 0 7px;
background: #eee;
}
.name {
padding: 0 7px;
background: #eee;
flex: 0 0 auto;
}
.blank-space{
flex: 1 1 auto;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div class="name">
<p>Mark Smith</p>
</div>
<div class="blank-space"></div>
</div>
</div>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div class="name">
<p>Loooooooooooooooong Name</p>
</div>
<div class="blank-space"></div>
</div>
</div>
This should be simple for you CSS gurus, but I really can't get this going. There are 4 boxes, example code:
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
</div>
When the window width is less than 800 only the rightmost div is moved, leaving them with 3 on top, and 1 on the next row.
I want the second two to go down the page as a pair. 2 on top, 2 on bottom, even if there is space for 3 next to eachother.
You need to set style for firstPair and secondPair elements
div[id$="Pair"] {
display: inline-block;
float: left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">s</div>
<div style="width: 200px; float: left">d</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">f</div>
<div style="width: 200px; float: left">g</div>
</div>
</div>
And one more solution with shorten html, but some more use css
div[id$="Pair"] {
display: inline-block;
}
[id$="Pair"] > div {
width: 200px;
float: left;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>s</div>
<div>d</div>
</div>
<div id="secondPair">
<div>f</div>
<div>g</div>
</div>
</div>
div[id$="Pair"] {
display: inline-block;
margin: 0;
}
[id$="Pair"] > div {
display: inline-block;
width: 200px;
margin: 2px 0;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>1</div>
<div>2</div>
</div>
<div id="secondPair">
<div>3</div>
<div>4</div>
</div>
</div>
It is about BFC.
You might also float the containers :
#wrapper> div {
float:left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">1</div>
<div style="width: 200px; float: left">2</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">3</div>
<div style="width: 200px; float: left">4</div>
</div>
</div>
Here's my solution. I tend to work in a fully responsive environment, so this will position them and be fully responsive on mobile. I also isolated the css, the inline colors are just for demo.
<style>
div#firstPair {
width: 100%;
max-width:400px;
float: left;
}
div#firstPair div{
width: 50%;
float: left;
}
div#secondPair {
width: 100%;
max-width: 400px;
float: left;
}
div#secondPair div{
width: 50%;
float: left;
}
</style>
<div id="wrapper">
<div id="firstPair">
<div style="background-color: blue;">first_1</div>
<div style="background-color: green;">first_2</div>
</div>
<div id="secondPair">
<div style="background-color: red;">second_1</div>
<div style="background-color: orange;">second_2</div>
</div>
<div style="clear: both;"></div>
</div>
I would like to put the footer at the bottom of the browser window and fill the empty part with the container when necessary(. This is my structure:
<header>
<div class='container'>
....
</div>
</header>
<div id='wrap'>
<div class='container'>
<div class='white-background'>
<div class='col-xs-12 col-sm-5 leftcontent'>[%leftcontent%]</div>
<div class='col-xs-12 col-sm-7 maincontent'>[%maincontent%]</div>
</div>
</div>
</div>
<footer>
<div class='container'>
<div style='text-align: center; padding-bottom: 20px;'><h3>[%copyright%]</h3></div>
</div>
</footer>
And this is the css:
#wrap {
min-height: 100%;
background-image:url('bk.gif');
background-color: #2c3e50;
}
.white-background{
width:100%;
height:100%;
display:block;
overflow:auto;
background-color: #fff!important;
}
footer{
background-color: #f2f2f2;
text-align:center;
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
padding-top:20px;
}
I have done some tries and took a look to other answers, but without success...
Try add first stycky footer solution
http://ryanfait.com/html5-sticky-footer/
I am trying to create a header with 3 divs: one is aligned left, one is aligned right and the other is in the center.
the page is for example 1200px
the black,red and yellow rectangles are 960px and centered in the page.
elements in the black rectangle are added to the left,
elements in the yellwo rectangle are added to the right,
and the elements in the red tectangle are centered.
This is a good general case study for header of a site
This will solve your issue
<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
<div style='float:left;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
<div style="margin:10px auto;text-align:center">Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
I wrote an article on this a while back here is my code...
<div id="mainContent">
<div id="col1">
Column 1
</div>
<div id="col2">
Column 2
</div>
<div id="col3">
Column 3
</div>
<div id="clearance" style="clear:both;"></div>
</div>
And here is the CSS for it....
#mainContent {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#col1 {
margin: 10px;
float: left;
width: 300px;
}
#col2 {
margin: 10px;
float: left;
width: 300px;
}
#col3 {
margin: 10px;
float: left;
width: 300px;
}
Hope this helps... Phillip Dews
Try this..
<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>
<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>