I am trying to create a section on my page that will contain inline-block divs (that would of various lengths). This outer div will be scales with the width of its parent (the parent has col-md-8). I'm trying to see if it's possible to float all the inner individual divs left with a right margin and have them disappear off to the right edge of the parent div. Clearly I'm missing something as these are not lining up the way I want them to.
.outer {
position: relative;
width: 330px;
height: 140px;
overflow-y: hidden;
background-color: red;
}
.box {
display: block;
height: 130px;
float: left;
margin-right: 20px;
background-color: grey;
border: 1px solid #333;
}
.box-1-col {
width: 130px;
}
.box-2-col {
width: 260px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="outer clearfix">
<div id="box-1" class="box box-2-col">
This is box 1
</div>
<div id="box-2" class="box box-1-col">
This is box 2
</div>
<div id="box-3" class="box box-1-col">
This is box 3
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/xc66s1L8/4/
Related
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Today I am facing a big problem with centering floated elements that have set custom width. For better explanation I made a snippet for you:
body { text-align: center; }
.square {
width: 20%; height: 100px;
background: cornflowerblue;
float: left;
}
.container {
display: inline-block;
}
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
</div>
</div>
<br>
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
</div>
</div>
The problem is that first three squares get shrinked after centering.
The reason why I am floating the elements is that the second container has to be same as first container and it must contain 5 elements (to cover full width of document). Here is how it looks like without floating (see the gabs between elements):
body { text-align: center; }
.square {
width: 20%; height: 100px;
background: cornflowerblue;
display: inline-block;
}
.container {
display: block;
}
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
</div>
</div>
<br>
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
</div>
</div>
Now the elements have right width, but the second line doesn't cover width of document because of the gabs between elements.
Is there any way to have floated elements with custom width centered? Which styles I should use for container element?
OK, I think I got what you need
.square {
width: 20%; height: 100px;
background: cornflowerblue;
display: inline-block;
font-size: 1rem;
}
.container {
display: block;
font-size:0;
}
jsfiddle
body { text-align: center; }
.square {
width: 20%; height: 100px;
background: cornflowerblue;
float: left;
}
.container {
width:100%;
margin-right:20%;
margin-left:20%;
}
Are you looking for something like this?
Add min-width:7px; this will solve your issue
body { text-align: center; }
.square {
width: 20%;
height: 100px;
background: cornflowerblue;
float: left;
min-width:7px;
}
.container {
display: inline-block;
}
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
</div>
</div>
<br>
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
</div>
</div>
Here your 5 div row era is also working.
I have to be centered a div, till here all is clear, but, I need to keep closed at left another div.
No boht centered, just center one div and keep sticky another one.
In my example, the center div (menu) and sticky div (logo.)
Maybe that's what you mean?
https://jsfiddle.net/g8c8wp34/1/
HTML:
<div class="layout-wrapper">
<div class="logo">
Logo
</div>
<div class="menu">
item 1
item 2
</div>
</div>
<div class="layout-wrapper">
<div class="col col1"></div>
<div class="col col2"></div>
<div class="col col3"></div>
</div>
CSS:
.layout-wrapper {
width: 400px;
background: #ccc;
margin: 0 auto;
}
.logo {
position: absolute;
background: #ddd;
width: 60px;
margin-left: -60px;
}
.col {
width: 32%;
background: #cdcdcd;
border: 1px solid #999;
height: 30px;
float: left;
box-sizing: border-box;
}
.col1 {
margin-right:2%
}
.col3 {
margin-left:2%
}
Or this (with fixed position logo): https://jsfiddle.net/g8c8wp34/2/
So, you want the menu to be centered and sticked to it's left a logo?
<div class="centered">
<div id="logo"></div>
<div id="menu"></div>
</div>
Wrap them into a div an center it. Float left the logo and right the menu.
Here you have the jsfiddle.
Tell me if this helps you!
Guy, Sorry I suck that this
How can i make this all my boxes avoid the spacing made by box 1 so that the box 4 auto adjust on the top
My Fiddle link - http://jsfiddle.net/QKbEk/3/
.grp {
width: 140px;
margin: 0px auto;
}
.box {
background: red;
margin: 3px;
float: left;
width: 50px;
height: 50px
}
You could change your rule for .box4 to:
.box4 {
background: red;
float: left;
margin: 3px;
width: 50px;
height: 50px;
position:relative;
top:-25px;
}
jsFiddle example
This happens because of the rules applied to floated elements. Specifically, "The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.". However by using positioning you can place the box wherever you need.
<div class="grp">
<div style="float:left;width:40%">
<div class="box" style="height: 80px">box 1</div>
<div class="box">box 4</div>
</div>
<div style="float:left;width:40%">
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 5</div>
</div>
</div>
Joshua Johnson post for masonry design: http://designshack.net/articles/css/masonry/
I've got three left-floating div (1, 2 & 3) and one floating right (4), which is also the last div in my HTML code. The three on the left take up 60% of the width and the last div should fill in on the right. However div 4 only floats past the div 3 and then stops.
<body>
<div style="width: 60%; float: left; background-color: red;">
div 1
</div>
<div style="width: 60%; float: left; background-color: red;">
div 2
</div>
<div style="width: 60%; float: left; background-color: red;">
div 3
</div>
<div style="width: 40%; float: right; background-color: yellow;">
div 4
</div>
</body>
Any suggestions how to make the div go to the top of the page?
This is what you want? DEMO
I edited a bit your HTML code:
<section class="container">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
<div class="block four"></div>
</section>
Just add these CSS rules:
*, *:before, *:after {
box-sizing: border-box;
}
body, div, section {
margin: 0;
padding: 0;
}
html, body {
background: #CCC;
height: 100%;
}
.block {
height: 100px;
display: inline-block;
border: 1px solid black;
}
.block:not(.four) {
float: left;
width: calc(60% / 3);
}
.four {
width: calc(100% - 60%);
}
.container > .four {
float: right;
}
I used the calc() function for set the anchors to the elements. You can see the browser support here
EDIT Sorry, I didn't understand your question. This is what you want! DEMO =)
Cheers,
Leo!
I think what you are trying to achieve here is put some content in your page (the left floated divs) and a sidebar (the right div).
Well, there are many ways to do it, here is a method without using floats (right or left).
HTML:
<body>
<section style="width: 60%;"> <!-- Your main content goes in here -->
<div style="background-color: red;">div 1</div>
<div style="background-color: red;">div 2</div>
<div style="background-color: red;">div 3</div>
</section>
<aside style="width: 40%;" class="right"> <!-- content for right sidebar -->
<div style="background-color: yellow;">div 4</div>
</aside>
</body>
CSS:
aside,section {
display : inline-block;
padding : 0;
margin : 0;
}
aside.right {
vertical-align: top; //to bring sidebar to top
}
Here is a demo FIDDLE