I have a problem with dinamiacally rearranging my div boxes.
I need two version:
mobile (one column beneath each other):
<div>A</div>
<div>B</div>
<div>C</div>
Any other (the middle one slides out from between the two others):
<div class="col-lg-4">
<div>A</div>
<div>C</div>
</div>
<div class="col-lg-8">
<div>B</div>
</div>
I can manage this with code duplications and visible/hidden pairs, but is there a solution without these? Especially I don't want code duplications...
Thanks,
edit:
unluckily, I forgot to add there is another complication:
I need several 100% width elements under this whole ABC thing, and height of the B element changes...
This setup shows that the D and the B overlaps. I want to position the D under the B...:
<div class="container">
<div class="row parent-row">
<div class="col-lg-4 div-wrap">
<div class="a">A</div>
<div class="b">B<br>B<br>B<br>B<br>B</div>
<div class="c">C</div>
<div class="d">DDDDDDDDDDD DDDDDDDDD DDDDDDDDDDDDDDDDD DDDDD DDDDDDDDDDDDDDDDDD DDDDDDDDDDDDD DDDDDDDD DDDDDDDDDDDDDD</div>
</div>
</div>
</div>
#media (min-width: 1200px) {
.b{
position:absolute;
top: 0;
right:0;
width: 66.66666667%;
padding-right: 15px;
padding-left: 15px;
min-height:1px;
}
.d{
position:absolute;
right:0;
width:100%;
padding-right: 15px;
padding-left: 15px;
min-height:1px;
}
.div-wrap{
position:initial;
clear:both;
}
.parent-row{
position:relative;
clear:both;
}
}
See if this will do the trick for you:
http://codepen.io/panchroma/pen/xRqgJe
The important bit is that when the viewport is wider than the stacked mobile view, you use a media query to take div 'B' out of normal flow by applying 'position:absolute'. And at the same time you manually apply the Bootstrap CSS styling for a 'col-lg-8' div, and you also tweak the positioning of its parents (.div-wrap and .parent-row) so that .B floats to the correct position.
Good luck
HTML
<div class="container">
<div class="row parent-row">
<div class="col-lg-4 div-wrap">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
</div>
</div>
CSS
#media (min-width: 1200px) {
.b{
position:absolute;
top: 0;
right:0;
width: 66.66666667%;
padding-right: 15px;
padding-left: 15px;
min-height:1px;
}
.div-wrap{
position:initial;
}
.parent-row{
position:relative;
}
}
You don't need to use absolute position. Apply float: right; and clear: left; properties instead.
I've tested two situations:
block A is higher than B
block B is higher than A
Please check the result: http://codepen.io/glebkema/pen/dOezEz
/* Heart of the matter */
#media (min-width: 1200px ) {
.clear-lg-left {
clear: left;
}
.pull-lg-right {
float: right !important;
}
}
/* Tests */
.tests {
margin-top: 14px;
}
.tests > div {
font-size: 28px;
font-weight: bold;
color: #fff;
padding-top: 6px;
}
.tests > div:nth-of-type(1) { background: #9c6; min-height: 120px; }
.tests > div:nth-of-type(2) { background: #f93; min-height: 80px; }
.tests > div:nth-of-type(3) { background: #69c; min-height: 80px; }
.test-2 > div:nth-of-type(2) { background: #f93; min-height: 160px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row tests">
<div class="col-lg-4">A</div>
<div class="col-lg-8 pull-lg-right">B</div>
<div class="col-lg-4 clear-lg-left">C</div>
</div>
<div class="row tests test-2">
<div class="col-lg-4">A</div>
<div class="col-lg-8 pull-lg-right">B</div>
<div class="col-lg-4 clear-lg-left">C</div>
</div>
</div>
Related
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I have this kind of structure....
<div class="container-fluid">
<div class="section_3 row">
<div class="image_info_carousel_left col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h1>Stay organized with your personal moving dashboard</h1>
<div class="author">Get timely reminders and assign tasks to stay on top of your move</div>
</div>
<div class="info_image col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="css/img/realtor-fourth.png" />
</div>
</div>
</div>
with this type of css....
.image_info_carousel_left {
padding: 100px 50px !important;
color: #fff;
background-color: #3B4C60;
}
.info_image {
padding: 0;
}
The height of the image within the image_info class varies dynamically... so the height of the image_info_carousel_left should also change & and the <h1> and <div class="author"> should be vertically centered...
I have tried using display:table & display:table-cell, but it doesn't work as classes with col-lg- are having float:left...
how can I do this?
this is the formula for vertical align anything.
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
Just put those commands to div you want to vertically align, or create a mixin if you are using preprocessors
I created this example to see it working with floats:
http://codepen.io/riogrande/pen/NxGROP
You can use display:inline-block; and vertical-align:middle; and don't forget to remove extra spaces which occurred by display:inline-block;.
Jsfiddle
* {
box-sizing: border-box;
}
.container {
width: 100%;
background: red;
padding: 10px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 50%;
}
.box1 {
background: blue;
}
.box2 {
background: blue;
}
img {
width: 100%;
display: block;
}
<div class="container">
<div class="box1 box">
<img src="http://placehold.it/350x150">
</div><!--
--><div class="box2 box">heading with the fixed height</div>
</div>
Is there a better way to absolutely position a bunch of boxes to the left and right like this? Perhaps using flexbox?
http://jsfiddle.net/frank_o/zpv4jbmx/
HTML:
<div class="box first">
<h1>Lipsum</h1>
</div>
<div class="box second">
<h1>Lipsum</h1>
</div>
...
CSS:
.box {
position: absolute;
background: blue;
color: white;
}
.box.first, .box.third, .box.fifth {
left: 20px;
}
.box.second, .box.fourth, .box.sixth {
right: 20px;
}
.box.first {
top: 20px;
}
.box.second {
top: 120px;
}
...
Since we are going for "better", you could use floating and CSS even/odd rules, like so:
HTML
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<!-- As many as you'd like... -->
CSS
.box {
background: blue;
color: white;
}
.box:nth-child(odd){
float: left;
clear: both;
}
.box:nth-child(even){
float: right;
clear: both;
}
The result is the same, but the implementation is much more scalable.
http://jsfiddle.net/9mcgvqLj/
I have an issue with the following CSS. The votes I wan't to be in the same height as the Title. Although it looks like the Votes is on the same div as tags and by div. So that the 3 items to the left looks shrunken. I am quite new to it so I fail to see what I have done wrong. I had it working before I changed the height from 54 to 60 pixels, but I assume that there is something else I have added as well.
#containerpostsmall {
width: 800px;
height:60px;
}
.votes {
height:60px;
width:100px;
float: left;
}
.number {
height:40px;
text-align: center;
}
.number-text {
height:20px;
text-align: center;
}
.texttags {
width:500px;
height:60px;
float: left;
}
.title {
height:40px;
width:500px;
font-size:32px;
overflow: hidden;
white-space: nowrap;
}
.tagsby {
height:20px;
width:500px;
float: left;
}
.tags {
float: left;
}
.by {
float: right;
}
I have the following code part:
<div id="containerpostsmall">
<div class="votes">
<div class="number">
<h1>6</h1>
</div>
<div class="number-text">
votes
</div>
</div>
<div class="votes">
<div class="number">
<h1>1</h1>
</div>
<div class="number-text">
answers
</div>
</div>
<div class="votes">
<div class="number">
<h1>4</h1>
</div>
<div class="number-text">
comments
</div>
</div>
<div class="texttags">
<div class="title">
We were very tired.
</div>
<div class="tagsby">
<div class="tags">
<span style="background-color: #ffffff; border-color: #000000;">Forest</span>
<span style="background-color: #ffffff; border-color: #000000;">Ocean</span>
</div>
<div class="by">
Peter |
2013-12-03 18:56:34
</div>
</div>
</div>
</div>
It looks to me like a default h1 formatting issue. Browsers are going to apply default styling to certain elements.
I set
h1{
margin: 0;
}
See fiddle: http://jsfiddle.net/kZLub/