Here's the sample/jsFiddle: http://jsfiddle.net/antonpug/ub7xW/
Basically, you can't see it in the jsFiddle, I don't think, but it is two columns when it is full screen, however, when you make the screen smaller, it collapses down to just one column - I can't figure out where in my CSS it is doing that!
This causes it:
.column {
display: inline-block;
width:600px;
margin:15px;
}
The inline-block will cause them to sit next to each other if your wrapper is 1200px or more, but otherwise it won't. Set a min-width if you don't want it to wrap.
#wrapper {
min-width: 1200px; /*might need a bit more for margins*/
margin:25px;
}
If you do want the columns next to each other you must specify a width under your body selector.
Something like
body {width:1500px;}
This forces the body to overflow the screen and place the columns next to each other. Otherwise, the width of the screen (or "viewing area") sets the width for the body selector because it's default is width:auto.
change css to
#wrapper {
margin: 25px auto;
width: 80%;
}
and
.column {
display: inline-block;
width: 46%;
margin: 15px;
float: left;
}
It's pretty straight forward:
.column {
display: inline-block;
width:600px;
margin:15px;
}
You have 2 DIVs both with ".column". These DIVs have a static width of 600px. They will float next to each other as long as there's space for them (ie. 1200px container)
They collapse because the page is too small for them.
If you're looking to keep 2-columns, you need to set the width to a % like so:
.column{
...
width: 40%;
}
you will have to do some adjustments for your margins as well, depending on what you're looking for.
If you want to keep 2 columns until a certain size, you can set a min-width on your wrapper element so you columns won't get too small:
.wrapper{
min-width:600px;
}
You can then run a media query for smaller screen sizes so you can collapse your columns into one for things like mobile phones.
change the column's css to this and it should be fine.
.column {
display: inline-block;
margin:15px;
width:40%;
}
Related
I am trying to resize the contents of two div based on what device the user has pc,tablet,phone with various resolutions.
I use this css code for the contents of my first div to align it left 80%.
.id1
{
float: left;
width: 80%;
max-width:100%;
min-width:80%;
margin-right:20px;
}
for my second div tag which includes a sidebar i use the following css code
.id2
{
position: relative !important;
min-width:100px;
}
when the width of the sidebar turn below 100px it automatically aligns itself at the bottom.
but i need to change the width of my first div to 100% ... how can i change it when the 2nd div automatically aligns itself at the bottom? Is this possible using css?
You could use media-query. Something like that:
#media (max-width: 576px) { /* if device is mobile */
.id1
{
float: left;
width: 100%;
max-width:100%;
min-width:80%;
margin-right:20px;
}
}
I have two div's, wrapped inside one container div. The bottom div contains a dynamically filled table (with variable width), which determines the overall width of all div's.
In the top div, I want to list several small red blocks (div's or span's or whatever). These red blocks need to take the available horizontal space, but wrap to a new line if they reach the max allowed width.
So this is what I want to achieve:
Unfortunately, I can't make it work. No matter how I CSS the red blocks (small floating div's, or inline-block's), they keep on taking more width than allowed. As a result, all div's become a lot wider than allowed, wider than my table:
How can I force these red blocks to only use the allowed with, and pick a new line if they run out of space?
Thanks!
UPDATE:
Here's a working example that shows the red blocks (which have variable length) next to each other, taking up more width than they are allowed. They need to start on a new line as soon as the table's width is reached.
http://codepen.io/anon/pen/bqobGp?editors=1100#0
table td{
border:thin solid gray;
line-height:25px;
padding:0 5px;
}
.div1, .div2 {
margin-top:15px;
padding:20px;
background:white;
box-shadow:2px 0 3px rgba(0,0,0,.12)
}
.container {
display:inline-block;
background:#f1f1f1;
padding:30px;
}
.badge {
line-height:30px;
background:red;
min-width:150px;
color:white;
margin:5px 10px;
text-align:center;
font-family:sans-serif;
border-radius:5px;
display: inline-block;
}
Based on my historical experience, you can achieve such behavior using basic HTML tables if you set small width on a parent table element...
So: for your code, we can use display: table and a small width on .container and white-space: nowrap; for .div2 (to prevent line breaks on table) as following:
.container {
display: table;
width: 50px; /* use a small value */
...
}
.div2 {
white-space: nowrap;
}
here is the updated code pen
/* shrink 2nd div to fit the table */
.div2 {width: fit-content;}
/* shrink first div to minimum size
* but constrain it to shrink no further than width established by its siblings
*/
.div1 {min-width: available; width: min-content;}
alternative approach
.container {width: min-content;}
These width values are fairly new and the spec are still in flux, so different browsers may support them under different names or prefixes may be needed.
I'm not sure what you call your "red" blocks in your css file, but something that is short and simple would be to calculate the width.
For example:
.parent {
width: 100%;
padding: 0;
margin: 0;
background: green;
float: left;
}
.red_block {
width: calc(100% / 5 - 20px); /* Calculate width here - where it takes the full 100% of the parent and divides it by 5 "red blocks" and subtracts 20px for each */
height: 40px;
padding: 0;
margin: 10px;
background: red;
float: left;
}
<div class="parent">
<div class="red_block"></div>
<div class="red_block"></div>
<div class="red_block"></div>
<div class="red_block"></div>
<div class="red_block"></div>
<!-- Will wrap to second line -->
<div class="red_block"></div>
<div class="red_block"></div>
<div class="red_block"></div>
</div>
DEMO
Does this answer your question?
UPDATE:
With your "red blocks" being calculated via width, you can even specify that class in some media queries to change the width to your liking for mobile devices! Example:
#media screen and (max-width: 48em) {
.red_block {
width: calc(100% / 3); /* or to whatever you want...IE: width: 100%; */
}
}
What should I do to get a <div> containing variable text behaving as follows:
width is always at least 400px;
words are not broken across lines, but lines can be broken at word boundaries;
text never overflows the border of the div, i.e. the width stretches to accommodate content such as very long words;
width is exactly 400px whenever possible. In particular, if there is a long paragraph with short words, the width should be exactly 400px.
The closest I got was using display: inline-block; min-width: 400px; but long paragraphs with short words still stretch the width.
You're saying you want your div to behave like a table / table-cell.
This should meet all your stated requirements:
.box {
width: 400px;
display: inline-table; /* table|inline-table|table-cell */
word-wrap: normal;
}
Demo: https://jsfiddle.net/cqo9yupw/
Try inline-table instead:
.mydiv{
display:inline-table;
width:400px;
border:1px solid red;
word-wrap:normal;
word-break:keep-all;
}
I suggest you try the following CSS:
#container {
width:400px;
}
#media screen and (min-width:401px) {
#container {
width:auto;
}
}
#media screen and (max-width:399px) {
#container {
width:auto;
}
}
A div with the id 'container' should be used to encapsulate all parts of your page. This width has been set to 400px. Now when the user zooms in or out, the width should automatically adjust to their user's window. Place the id for the paragraph(s) you have in the #media sections, and they should also auto adjust.
E.g.:
#media screen and (min-width:401px) {
#container {
width:auto;
}
}
#media screen and (max-width:399px) {
#container {
width:auto;
}
#paragraph {
width:auto;
}
}
I am developing Facebook application (I am not CSS pro.). The iframe canvas is liquid eg. width 100%.
The main div that hold the application is 500 px wide. There are two divs of left and right from main dic (see picture below). Left and right divs must have the same width.
When user resize browser window I want keep main div centered with fixed width while both left and right divs must resize appropriately to take only available space.
In case there is no space for left and right divs they must disappear. Main div must be centered.
Thank you very much for you help.
</style>
body{
margin: 0px;
padding: 0px;
}
#main{
width: 300px;
display: inline-block;
background: red;
}
#left, #right{
width: calc(50% - 150px);
display: inline-block;
background: green;
}
#media (max-width: 400px) {
#left, #right{
display: none;
}
}
</style>
<body>
<div style="text-align: center;">
<div id="left">1</div><div id="main">2</div><div id="right">3</div>
</div>
</body>
This is what I have so far: http://jsfiddle.net/clicker314/L77jh8ak/4/
If you are willing to use the calc() CSS function, this problem is relatively easy to solve:
#main{
width: 500px;
display: inline-block;
}
#left, #right{
width: calc(50% - 250px);
display: inline-block;
}
Thus, the left and right divs adjust their height based on the width of half of the screen, minus half of the main element. If you want a fallback, add another 'width:' rule on the line prior to the calc() width rule.
This works on all modern browsers, including IE 10+. If you want IE 8/9 support, add the second width rule I mentioned above.
For IE 8/9 support, you have two options:
1. Give a defined width for those two options. I.e. #left, #right{width: 200px;}.
2. Add some JS/jQuery to imitate the CSS calc() function.
To hide the divs on a certain size, add a media query (the 600px I added is hypothetical, pick any minimum screen size you like):
#media (max-width: 600px) {
#left, #right{
display: none;
}
#main{
width: 100%;
}
}
The #main rule there is optional. It assumes that you want the #main div to take up all of the space available in the container.
I'm trying to render a 3 column design with the following :
middle fixed width at 660px
left and right half of the remaining but with min-width : 120px
middle div should be centered on the screen
Everything I'm finding is about fixing left and right column and letting fluid the middle one, but I want the exact opposite.
I've partially achieved my goal using
display: inline-block;
vertical-align: top;
Here's the fiddle.
What's missing is the right resizing of the right and left div. When the window get resized, 660/sizeofwindow is changing, so the value in percentage of the left and of the right div are no longer correct.
Use calc to achieve this.
It is a native CSS way to do simple math right in CSS as a replacement for any length value.
Please note that calc does not work with all browsers.
Write:
#left, #right {
min-width:120px;
width:calc(50% - 330px); // half of 660px
}
As you are using display:inline-block, make sure you don't leave any space between your div's because inline-block leaves white-space between elements.
See updated fiddle here.
http://jsfiddle.net/hdt75/
.fenetre {
text-align: center;
width:1200px;
background-color: grey;
margin: 0 auto;
}
If you want table-like behavior, you should use display: table-cell in your CSS:
.fenetre {
display: table-row;
}
.section {
display: table-cell;
}
#right {
width: 50%;
}
#middle {
min-width: 660px;
max-width: 660px; // just 'width: 660px' won't be enough here
}
#left {
width: 50%;
}
http://jsfiddle.net/mblase75/zL9cn/