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;
}
}
Related
I'm sure this is simple but I'm struggling to get my head around it.
I have two divs. A heading div max-width 500px. A main div max-width 400px. The main div should be centered horizontally in the browser window. The left hand edge of the heading div needs to align to the left hand edge of the main div. See below. The red line is the center of the browser window:
I've acheived this by adding a wrapper div with max-width 500px (the pink colour) and using extra padding on the left hand side. This works to a point. But at smaller screen sizes the extra padding on the left knocks the layout off center.
So how do I create this layout? I'm presuming I can not add the heading div as a child of the main div, because a child can't be wider than its parent. I'm guess flexbox might be the answer, but I've never used Flexbox.
This is the code I have so far:
https://jsfiddle.net/aqpyzogc/
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
.wrapper {
max-width:500px;
margin:0 auto;
padding:0 0 0 100px;
background-color:lightpink;
}
.heading {
max-width:500px;
background-color:cyan;
height:100px;
}
main {
max-width:400px;
background-color:grey;
height:500px;
}
But at smaller screen sizes the extra padding on the left knocks the layout off center.
You can calculate the correct amount of padding for those viewport sizes, using the calc() function.
Below 600px viewport width, the remaining space is 100% minus 400px, and we need half of that for the padding-left, so:
body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
#media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
I set the body margins to 0 here as well, so that the whole thing fits with the 600px breakpoint. If you need those additional margins, you have to figure them in in the breakpoint value calculation.
Fiddle: https://jsfiddle.net/aqpyzogc/1/
Suppose I have a page and in that page, I have a div named #bar:
In the style tag, I'll write something like:
<style>
#bar {
width: 100px;
}
</style>
I want to write CSS so that the div adjust its height automatically according to the page's height. I'll use the same div in different pages and it'll adjust its height automatically according to the page it is in. Is there any way to do that?
Let me be more specific. Suppose my code is like this:
<style>
#example{
float:right;
}
#bar {
width: 100px;
height:100%;
border: 1px solid red;
box-sizing: border-box
}
</style>
<div id="example"><p>This is page content</p><p>This is page content</p></div>
<div id="bar"></div>
Now, I'll copy and paste the paragraph something like hundred times, so the size of my page will increase. I want my div to automatically adjust its height after I copy-paste the paragraph a hundred times, so that the div will cover top to bottom of my page. Is there any way to do this?
Provide height: 100% to .bar.
.bar {
height: 100%;
}
Also, a thing to note here is you should give height: 100% to the html and the body.
html, body {
height: 100%;
}
You could use position:absolute; as follows:
#bar {
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
}
For a pure CSS solution, you can use #media to change the div's size based on window size:
#media screen and (max-height: 600px) {
#bar {
width: 90%;
height: 90%;
overflow: hidden;
}
}
This will allow you to set exact heights based on the window's parameters.
Here is a JSFiddle Demo.
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.
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%;
}