I have three container, left, middle and right. Width ratio is like 15%, 70% and 15%. I want to restrict max-width of middle container to 1000px.
This works fine as long as screen resolution is under 1428px. If screen resolution is greater than 1428px, 70% becomes greater than 1000px. So i need to write another rule for these bigger screen.
So middle container is now 1000px. How i can distribute rest space to other two container - left and right? A JavaScript solution gives a certain jump/shake in the browser. I want to avoid these shaking in browser.
OK so here is how things are. I suppose you have html something like this :
HTML:
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
So you have to apply css like this ( I don't know if you're satisfied with browser support but I think there is no css only another way)
CSS:
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.left,.right,.center{
float:left;
margin:0;
padding:0;
display:inline-block;
height: 100px;
}
.left,.right{
width:15%;
background:yellow;
}
.center{
background:red;
width:70%;
max-width:1000px;
}
#media(min-width:1000px){
.left,.right{
width:calc((100vw - 1000px) / 2)
}
}
https://jsfiddle.net/Lghms68y/ Here is a fiddle. NOTE : You'll have to zoom out the page to see the effect :)
Related
Is there any way or workflow that will allow you to see elements that are positioned partially (or wholly) outside the viewport of the browser while designing? Like you can with artboards in Illustrator?
For example: Say I have a rectangle positioned at {left: -50px} in the body (that's a minus in there), meaning that 50px worth of rectangle is outside the viewport. Is there any tool that will visually represent that?
A hack solution: Create a div to contain all the content of your website, but make the width < 100% so that you can see the content as it overflows into the body. Change the width as you like..
<div class="virtualize-overflow">
Normal Content
<div class="overflow">Overflowing content</div>
</div>
.virtualize-overflow{
display:block;
background-color:gray;
width:50%;
height:50%;
margin:auto;
margin-top:30%;
}
.overflow{
display:block;
width:250px;
height:100px;
margin-left:-100px;
background-color:red;
}
I'm having trouble wrapping my brain around this one.
How would I go about having a fixed width div, margin:auto, and then on both sides of that div have divs that adjusts their width automatically to fill the rest of space?
Thanks
Appreciate any help
something like this without any container.
http://jsfiddle.net/JuG8W/
HTML
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
CSS
#left{
float:left;
width: calc( 50% - 150px );
background-color:blue;
}
#right{
float:right;
width: calc( 50% - 150px );
background-color:green;
}
#middle{
float:left;
width:300px;
margin:0 auto;
background-color:red;
}
try this jsfiddle it uses simple display property to achieve this layout. It gives you consistent layout even if you scale the width to extreme minimum and you don't have to hard code anything except the width of the center <div> which you can also specify in %.
Update
First fiddle has center <div> width in % which makes it good for responsive design. This fiddle has center's width fixed (in pixels)
I am trying to make a fluid grid website and now im facing a problem which a just cant seem to fix just using css. Obviously i'm doing something wrong, but i just cant find what.
Here's the thing: I have one column (div: left) and one body (div: right) displayed in-line. in stage one div left has a width of 180, and div right is growing till it reached 640px (like youtube). In stage two i want to make the column grow some more from 120px to 150 px, But when the column is growing div right gets pushed down, even though there is enough space. Im thinking it has something to do with the margin's technique ive been using but i cant find it, and dont know any alternatives i could use since im trying to do this without using java.
Here is my jsfiddle: which will show the problem clearly: http://jsfiddle.net/tomvisser/WcbYL/embedded/result/
I happy with all help i can get.
Thanks in advance.
<body>
<div class="gridContainer clearfix">
<div id="center">
<div id="left">This is the content for Layout Div Tag "left"</div>
<div id="right">This is the content for Layout Div Tag "right"</div>
</div>
</div>
</body>
here is the css:
#left {
float: left;
height:400px;
width: 150px;
display:inline;
background-color:#F00;
}
#right {
margin-left:150px;
background-color: #6F0 ;
height:400px;
}
#media only screen and (min-width: 650px) {
.gridContainer {}
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
width:100%;
margin-right:500px;
}
Yes it's the margin pushing it down. Not sure what you're asking exactly but I can probably bet you're looking to give the 2 divs the max-width property.
So for step 2 (the media query?), delete the margins and try doing something like:
max-width: 180px;
for the left column.
This is the code I edited in your media query block:
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
max-width:180px;
}
Although do you have them floating right on purpose?
Hi i tried your code and find a solution for you.Hope it will help for you.Here i am
assuming the total width of a page is 1024px.
HTML code
<div class="gridContainer clearfix">
<div id="center">
<div id="right">This is the content for Layout Div Tag "right"</div>
<div id="left">This is the content for Layout Div Tag "left"</div>
</div>
</div>
CSS
<style type="text/css" >
#left {
height:400px;
background-color:#F00;
width:512px;
}
#right {
background-color: #6F0 ;
height:400px;
float:right;
width:512px;
}
</style>
Here i am giving width 512px to each div because i am assuming that total width of page
is 1024px.If you want to increase the width of left by 12 px means 512px + 12px = 524px
then you need to decrease 12px from div right width because width cannot be more
then total width of page i.e 1024px.After decreasing it will become 500px and again
524px + 500px = 1024px.In that case your right div will not push down.
Hope you understand and will work for you.
I have a main div at the center of the screen at the shape of the touch pad.
Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.
See the pic below, yellow window is the whole pad and the red window is the content screen.
Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?
Yellow's css:
#mainWindow{
margin-left:auto;
margin-right:auto;
background-image:url("../images/mainWindow.png");
background-size:100% 100%;
height:100%;
width:80%;
position: relative;
border-style:solid;
border-width:3px;
border-color:yellow;
}
The red one doesn't really have anything.
I hope you understood me. Thanks beforehand.
EDIT:
html code for the screens:
<div id='mainWindow'>
<div id='screen'>
</div>
</div>
In order for a DIV to have 100% height, you need to make its parents 100% height as well:
body, html {height:100%}
Slightly confusing prompt, but see if this works for you:
http://jsfiddle.net/T3MHZ/
HTML snippet:
<html>
<head></head>
<body>
<div id='mainWindow'>
<div id='screen'></div>
</div>
</body>
</html>
CSS styles:
html, body{
width:100%;
height:100%;
margin:0;
}
#mainWindow{
margin:0;
height:100%;
width:100%;
/* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
padding:50px 40px 50px 40px;
/* box sizing will make sure that the usable content size is minus the padding value */
box-sizing:border-box;
position: relative;
border:1px solid black;
}
#screen{
width:100%;
height:100%;
border:1px solid red;
}
By using a combination of measured padding on #mainWindow to account for the tablet border, and box sizing of border-box to assure exact fit of the #screen content, this should give you the flexible layout you're looking for.
Don't forget your viewport meta tag! ;)
I'm not sure if I'm understanding what you want correctly, but try
height: 100%;
on red.
min-height:100%;
You have no content, it's going 100% of it's parent content. Diodeus's answer would work as well for the same reason, if the body, html are 100% window height then the divs inside will look at that as content.
http://jsfiddle.net/calder12/Jq7xR/
<body>
<div class="container">
<div class="outside">
<div class="inside"></div>
</div>
</div>
</body>
.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}
To be honest even my brain is struggling with the 82.5% height to get the margins to work right =/ But I do believe that is what you're after.
all i am doing is a simple - creating a html page. however, i got 2 probs.
1) when i set the width in pixels:
i see width mismatch/conflict between IE8 and mozilla. (width:1024px)
this setting sets the width perfectly in mozilla (full screen size) but in IE, it exceeds the page/screen width and i have to scroll to the right to see some part of the page.
sample code:
html:
<div style="width:1024px">
2) when i set the width in percentage and resize the window:
the page shrinks and the whole page gets collapsed.
below is the code.
<div class="body">
<div class="header">
something
something1
something2
something3
something4
</div>
</div>
css:
.body
{
min-width:100%;
max-width:100%;
width:100%;
margin:0px;
background:grey;
float:left;
}
.header
{
float:left;
min-width:100%;
max-width:100%;
width:100%;
margin:0px;
background:#000;
}
how can i overcome this small glitch?
any help is appreciated.
Use a reset style sheet, or add the following to the css:
body,
html {
padding: 0;
margin: 0;
}
Generally,Internet explorer(lower version) browser scroll bar take some pixels. Just u put width 1000px or 100%, because 100% width all resolution and screen sizes appear full screen without scroll.
I think no need body and header float: left