How can I have a question about div within a div div centered on the screen, according to the inside of the div is adaptive
Best can be a row of three equal div two shows that no matter how big is the screen
.wrap {
border: solid 1px;
width: 100%;
height: 50%;
text-align: center;
margin: 0 auto;
}
.wrap>.child {
border: solid 1px red;
min-width: 32%;
height: 100%;
float: left;
margin: 0 auto;
}
<div class="wrap">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
This should do the trick
.wrap {
border: solid 1px;
text-align: center;
position: absolute;
width: 100%;
height: 50%;
top: 2px;
bottom: 2px:
right: 2px;
left: 2px;
}
.wrap>.child {
border: solid 1px red;
min-width: 32%;
height: 100%;
float: left;
margin: 0 auto;
}
<div class="wrap">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
It looks like you're trying to create three equal width columns and not being able to use 33.3333%, you've opted to instead just try to center them. First of all, the biggest issue you have is not using box-sizing:border-box. That rule will include the border width and padding in calculating a percentage width. So you can make your code like so:
.wrap {
border: solid 1px;
width: 100%;
height: 50%;
text-align: center;
margin: 0 auto;
}
.wrap>.child {
border: solid 1px red;
min-width: 33.333%;
box-sizing: border-box;
height: 100%;
float: left;
margin: 0 auto;
}
<div class="wrap">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
It doesn't directly address the stated issue, but it may be what you're really going for.
Related
Bit of a beginner's question here - I'm sure it's been asked many times over but not knowing how to phrase the question means I've found it hard to find answers.
I'm trying to create 3 "cards" in a div which are responsive. I would like the margin between the cards to stay at 20px.
This is what I've come up with so far - the contents of the card container should add up to 965, so I'm not sure what's causing it to break and spill out, unless I'm doing something else wrong.
.container {
max-width: 1280px;
}
.card-container {
max-width: 965px;
padding: 0 20px;
display: block;
float: left;
}
.card {
width: 33%;
min-width: 295px;
}
.one {
width: 100%;
height: 200px;
background-color: #333;
display: block;
float: left;
}
.card + .card {
margin: 0px 0px 0px 20px;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
</div>
<!-- <div class="map-card"></div> -->
</div>
Thanks for any help, or redirecting to a similar topic.
You can use flex like this https://jsfiddle.net/3gg8ngm2/2/:
.container {
max-width: 1280px;
}
.card-container {
max-width: 965px;
padding: 0 20px;
display: flex;
}
.card {
width: 33%;
/* min-width: 295px; */
}
.one {
width: 100%;
height: 200px;
background-color: #333;
display: block;
float: left;
}
.card + .card {
margin: 0px 0px 0px 20px;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
</div>
<!-- <div class="map-card"></div> -->
</div>
Or you can also use display-inline-block to your .card class.
There is a solution based on display: flex
.container {
width: 600px;
}
.card-container {
display: flex;
background: yellow;
}
.card {
width: calc(33% - 20px);
margin-right: 20px;
}
.card:first-child {margin-left:20px}
.one {
height: 200px;
background-color: #333;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one">1</div>
</div>
<div class="card">
<div class="one">2</div>
</div>
<div class="card">
<div class="one">3</div>
</div>
</div>
</div>
Add this
.card {
width: 30%;
float:left;
min-width: 295px;
}
and will resolve your issue.
I have div(class name:xyz)to insert small 4 divs (class name:ax )in it.
I need to insert the first two divs vertically, the third one should come next to first one horizontally and the fourth one should come next to the third vertically.
But all the children are appearing vertically in side the parent.
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
You can use CSS3 Multiple column layout which in your case will be column-count: 2;, this property works in following browsers.
.xyz {
max-height: 450px;
max-width: 500px;
column-count: 2;
-webkit-column-count: 2;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
display:inline-block;
}
<div class="xyz">
<div class="ax">1</div>
<div class="ax">2</div>
<div class="ax">3</div>
<div class="ax">4</div>
</div>
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float: left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
Like this?
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float:left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div style="clear:both"></div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
I think you are looking for this one , try with snippet
.xyz {
max-height: 450px;
max-width: 500px;
margin-right: -25px; /* newly added */
margin-left: -25px; /* newly added */
}
.ax {
height: 200px;
width: 200px;
margin: 0 25px 25px 25px;
background-color: #C0C0C0;
float:left; /* newly added */
}
<div class="xyz">
<div class="ax">1 </div>
<div class="ax">2 </div>
<div class="ax">3 </div>
<div class="ax">4 </div>
</div>
I have 3 divs but the 3rd div comes down when i resize the browser.
How can i still display them inline when browser resize?
I can do it by changing the width of my container
but i want it to be 100%
This is my Code:
.box{
float :left;
width: 250px;
background: #f6f6f6;
border: 1px solid #e0e0e0;
min-height: 150px;
position: relative;
padding: 20px;
margin-right: 26px;
}
.container{
width: 100%;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br style="clear: left;">
</div>
Thanks :)
You need to use the CSS3 flexible box layout so that the elements do not wrap to next line and resize accordingly. The default values of flex-direction is row and flex-wrap is nowrap. So you need not set the values here.
.box {
width: 250px;
background: #f6f6f6;
border: 1px solid #e0e0e0;
min-height: 150px;
position: relative;
padding: 20px;
margin-right: 26px;
}
.container {
width: 100%;
display: flex; /* Added */
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br style="clear: left;">
</div>
You can use like this -
.box{float:left;
max-width: 250px;
min-width: 20%;
/*max-width: 250px;*/
background: #f6f6f6;
border: 1px solid #e0e0e0;
min-height: 150px;
position: relative;
padding: 20px;
margin-right: 26px;
}
.container{
width: 100%;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br style="clear: left;">
</div>
Instead of specifying .box {width: 250px} make it in percentage, remove margin, add box-sizing for padding issue:
.box {
float: left;
width: 33.33%;
/* Instead of old 250px; */
background: #f6f6f6;
border: 1px solid #e0e0e0;
min-height: 150px;
position: relative;
padding: 20px;
box-sizing: border-box;
/* To include padding to width */
/*margin-right: 26px; Can't use margin for responsive gaps*/
}
.container {
width: 100%;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br style="clear: left;">
</div>
Added an inner div
bodY{
margin: 0;
}
.box{
float :left;
width: 250px;
background: #f6f6f6;
border: 1px solid #e0e0e0;
min-height: 150px;
position: relative;
padding: 20px;
margin-right: 26px;
}
.box:nth-child(3){
margin-right: 0;
}
.container{
overflow-x: hidden;
width: 100%;
}
.inner{
margin-right: -400px;
width: 928px;
}
<div class="container">
<div class="inner">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br style="clear: left;">
</div>
</div>
I think it is easy if you try bootstrap.
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-4 col-sm-4 col-xs-4">
//first div contents
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
//second div contents
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
// third div contents
</div>
Note you should include required bootstrap files to use this classes
Updated based on comments
I'm trying to create div sections on a full sized page by making containers that are 30% of the width. Within those, I plan to have 2 or 3 div sizes aligned within them. I have a row with a large box that occupies 100% of the height, and a portion of the width, and then a box that's exactly half of the size. I'd like to have all of those half-size boxes be in the same row as the larger box to create a nice stack. I'm assuming it's an issue of size vs position, but I haven't had much luck and I'm over-thinking the issue.
Fiddle: https://jsfiddle.net/as9hud4k/10/
HTML:
<div class="content_section">
<div class="content_thirdsize">
<div class="content_thirdsize_inner_row">
<div class="content_thirdsize_inner_large"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
</div>
</div>
</div>
CSS:
.content_thirdsize
{
width: 500px;
height: 500px;
display: inline-block;
text-align: center;
vertical-align: top;
background-color: rgba(83, 35, 128, 0.2);
}
.content_thirdsize_inner_row
{
width: 500px;
height: 105px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
margin: 2px;
}
.content_thirdsize_inner_large
{
position: relative;
width: 100px;
height: 100px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
border: 1px dashed #000;
vertical-align: left;
}
.content_thirdsize_inner_small
{
position: relative;
width: 50px;
height: 50px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
border: 1px dashed #000;
vertical-align: right;
}
I suspect the math may need to be tweaked to account for spacing but flexbox can do a lot of the work here.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
display: flex;
margin: auto;
}
.content-wrap {
display: flex;
flex-wrap: nowrap;
padding: 5px;
background: orange;
}
.small-wrap {
display: flex;
flex-wrap: wrap;
width: 350px;
}
.large,
.small {
width: 100px;
height: 100px;
background: rebeccapurple;
border: 2px dotted white;
}
.small {
width: 50px;
height: 50px;
}
<section>
<div class="content-wrap">
<div class="large"></div>
<div class="small-wrap">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div </div>
</div>
</section>
Codepen Demo
I would recommend using position and then align the divs using left, right, top, bottom. Pick a position setting that makes sense in your mind for moving the div and then fiddle with it's position until they line up as you would like.
As paulie_D said in the comments don't use IDs multiple times, they are supposed to be unique. You want to be using a class to apply the same style on multiple objects. My general rule is that classes are for applying style and IDs are for identifying a specific object on the page.
I have a little problem with a div 2 that wont go bellow div 1 (see images bellow). I am going to be continueing this on (more div going along) and because of that I don't want to split off the to smaller divs. any help would be greatly appreciated.
.large,
.small,
.long-down {
float: left;
margin: 1px;
}
.small {
width: 100px;
height: 100px;
background: gray;
}
.large {
width: 200px;
height: 200px;
background: black;
}
<div class="wrapper">
<div class="small"></div>
<div class="small"></div>
<div class="large"></div>
<div class="large"></div>
<div class="large"></div>
<div class="small"></div>
<div class="small"></div>
<div class="large"></div>
</div>
If you want a solution that works for any number and order of boxes of different sizes, Masonry (a javascript solution) might be what you are looking for.
.large,
.small,
.long-down {
float: left;
display: block;
}
.small {
width: 100px;
height: 100px;
background: gray;
margin-bottom: 1px
}
.large {
width: 200px;
height: 200px;
background: black;
float: right;
margin-top: 1px;
}
.wrapper {
width: 301px;
}
.pull-left {
width: 100px;
float: left;
margin-right: 1px;
}
<div class="wrapper">
<div class="pull-left">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
<div class="large"></div>
<div class="large"></div>
</div>
i think http://masonry.desandro.com/ can help you in this.
It works by placing elements in optimal position based on available vertical space