I have a single div that has a width of 100%. When the browser is resized the div resizes to remain 100% of the browser width. Inside that div is three more divs with widths of 200px. When the browser it stretched to be 600px wide then all the divs are side by side nicely, just as I want it. But if you stretch the browser to be 599px or less one or two divs get knocked down a row and appear below the other divs which is not ideal.
So what I want is for the divs to always remain side by side and equally change in width. So if I change the browser width to, for example, 150px then the three divs that are all side by side have widths of 50px each.
Is this possible using only CSS and HTML code? I don't think I need to provide my code seeing as it is just three divs inside one other div.
.parent {
display: block;
}
.child{
width: 32.5%;
border:1px solid red;
float:left;
}
<div class="parent">
<div class="child">One</div>
<div class="child">Two</div>
<div class="child">Three</div>
</div>
You can do it with the Flexbox:
body {margin: 0}
.parent {
display: flex; /* displays flex-items (children) inline */
}
.child {
flex: 0 1 200px; /* initial width of 200px */
text-align: center;
}
.red {background: red}
.green {background: green}
.blue {background: blue}
<div class="parent">
<div class="child red">Red</div>
<div class="child green">Green</div>
<div class="child blue">Blue</div>
</div>
You can apply these settings to your three DIVs.
.my_div {
width: 33%;
max-width: 200px;
}
This will make sure the three DIVs always fit into the container (33% width), but will never get wider than 200px each, also if the container is much wider than 600px.
Related
Hi,
I have this code:
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
what I want to do is to have #center display always at a minimum size whereas the other 2 will collapse and even disappear if the window is resized or seen on a smaller resolution.
This is my CSS:
div {display:table-cell;}
#left, #right {width:auto;}
#center {width:1460px;}
this will look fine on a 1080p screen but not on smaller such as a 1024 width screen because a scroll bar will show. In those cases I want #center to cover the whole width and the other 2 divs to collapse completely to make room. How can this be achieved with only html and css?
Thank you.
Cain, I think this will be easier to show if I demo a smaller width for the center column. You can easily adjust the CSS to work at 1460px.
/*
1. Ensure center column has a fixed size
2. If there is horizontal space greater than 460px,
fill it equally with the left and right divisions
*/
.container {
display: flex;
}
.container > div {
height: 40px;
}
#left, #right {
flex: auto;
background: rgba(255, 0, 0, 0.5);
}
#center {
flex-basis: 460px;
background: black;
}
<div class="container">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
You can use CSS flexbox like this:
#container {
display: flex;
}
#left, #right {
background-color: gray;
flex-grow: 1;
min-width: 0;
overflow: hidden;
}
#center {
background-color: yellow;
min-width: 500px;
}
<div id="container">
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
</div>
flex-grow:1 allows the left and right divs to grow and take up any empty space.
min-width:0 allows the left and right divs to disappear completely even though they have content inside.
overflow:hidden hides any content that is overflowing outside the left and right divs as the divs shrink.
min-width:500px makes sure the center div will never shrink below a width 500px.
The center div will never grow beyond 500px either, since the left and right divs will grow to take up the empty space.
Additionally, if you want the left and right divs to have a maximum width and allow the center div to grow, add the following as well:
flex-grow:1 to #center to allow it to grow.
max-width:50px to #left, #right to cap the width of the left and right divs.
Here is a working example.
How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.
I have this CSS:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/
What I want to do here is:
the red div must be exactly as wide as the 3 blue divs in its first row
the red div must be centered within the green div
javascript must be avoided
no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)
First of all, if you want to center an Element you need to make it:
display: block;
width : %/px;
margin-left: auto;
margin-right:auto;
If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.
such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/
Theres two conflicting issues here.
1)You must have a set width in order to do margin-left/right auto.
2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.
In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!
try this for to your inner and see what happens.
.inner{
width: 250px;
margin: 0 auto;
background-color: red;
}
I have list of tiles with different widths. All of them are sitting inside the .projects with auto width, and it's wrapped by another div (.wrapper), which has 100% width.
<div class="wrapper">
<div class="projects">
<div class="pro p1"></div>
<div class="pro p2"></div>
<div class="pro p4"></div>
<div class="pro p2"></div>
</div>
</div>
I want to have .projects block centered, but .pro should be floating left, because I want to keep tiles aligned left, so I cannot use display: inline-block; for .pro elements.
It works perfectly if number of elements can fit in one row -> than .projects width is equal to sum of widths of all .pro containers inside (first and second example in Fiddle).
But if number of elements is bigger, they go to another row, .projects container became 100% width instead of real max width of inside elements.
Is it possible to achieve width of .projects not 100% if child elements doesn't fit in one row instead of effect from the last example?
Take a look on the code: http://jsfiddle.net/68U47/2/
.projects {
width: 600px;
margin: 0 auto;
}
[class^="pro"] {
display: inline-block;
width: 20%;
float: left;
}
Something like this should do it, basically margin 0 auto on the projects will center it on the screen.
I want to make layout where I will have different full width backgrounds. For example top is full width orange color, inside the full width div I have container that keeps everything in specific dimension (width: 1000px). And I met a problem, The content of the container div doesnt stretch the full width div. So right now to keep it work, I have to set in .orange and .red specific height. But this is not the solution, because right now my block has xxx heights, what If I add something like more pictures - I have to set bigger hight etc...
Here is what I mean:
HTML
<div class="full-width orange">
<div class="container">
content
</div>
</div>
<div class="full-width red">
<div class="container">
content 2
</div>
</div>
CSS
.full-width {
clear: both;
width: 100%;
overflow: hidden;
}
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.orange {
background-color: orange;
}
.red {
background-color: red;
}
I am sorry for my bad english.
if you put more content into your DIVs, they will stretch. their default height is auto (http://www.w3schools.com/cssref/pr_dim_height.asp) which automatically stretches the div to the height it needs to be. if you set height to a percentage, the div will be that percentage of it's parent container.
here is a JS fiddle for you to play with http://jsfiddle.net/dv9ah/
i set the
height: auto;
in both the .red and .orange classes, but you can change them to a set height (like 100px) to see how they change.
http://jsfiddle.net/zEcn3/12/
I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.
The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.
HTML:
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>
CSS:
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
A friend figured it out for me, the answer is to use media queries.
#media (max-width: 1080px) {
#main {
max-width: 640px;
}
}
So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.
I'm not quite sure if you were trying to remove the 100% width on the container, or just have the container shrink along with the content, depending on the size of the screen.
The problem, as I see it, is that when I shrink the screen, the last "Hello" on the right side gets pushed down to the next row.
So what I did is set 100% width to the wrapper. I then just removed the fixed width from the items and changed it to % widths. In this case I took the number of boxes and divided them into 100%, which was 20% each (but with 1px border I reduced to 19% each). Also, I added display:block; margin-left:auto; margin-right:auto; to the id="content".
Here's the link to JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/
I found the answer here:
http://haslayout.net/css-tuts/CSS-Shrink-Wrap
It basically amounts to using display: inline-block; on the block element you want to shrink to fit its contents.
Try to use margin:auto to the container <div> and set a fixed position.