See image for my problem, any input would be greatly appreciated!
Image LINK: http://i.stack.imgur.com/cgSqC.png
Here's a fiddle with a template if it helps:
http://jsfiddle.net/JUnTn/
HTML:
<div id="map-header">
TOP HEADER
</div><!-- end map-header -->
<div id="map-column">
LEFT COLUMN
</div><!-- end map-column -->
<div id="map-container">
FILLS THE REST OF THE PAGE
</div><!-- end map-container -->
CSS
html{
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#map-header{
clear:both;
width:100%;
height:100px;
border-bottom:2px dotted gray;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#map-column{
width:100px;
float:left;
background-color:green;
border-right:2px dotted gray;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#map-container{
float:left;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
EDIT:
still looking for assistance on this, I got this so far based off some research I did around Stack:
http://jsfiddle.net/SpSjL/1152/
Still isn't exactly what I need, any help is appreciated!
I hope this is what you want,see the updated fiddle http://jsfiddle.net/JUnTn/2/
I wrapped the two div's inside another div.
#test{
width:100%;
}
#map-column{
width:10%;
float:left;
}
#map-container{
float:left;
width:90%;
}
<div id="map-column">
LEFT COLUMN
</div><!-- end map-column -->
<div id="map-container">
FILLS THE REST OF THE PAGE
</div><!-- end map-container -->
<br class="clear" />
CSS
br.clear{
clear: both;
}
#map-column{
float: left;
width:100px;
}
#map-container{
float: right;
}
Jquery
$(document).ready(function() {
var myWidth = $(window).width() - 100;
$('#map-container').css('width',myWidth);
});
You can use a cool top bottom left right trick to get this (got from pinterest). When I normally want a full screen, edge to edge, I use,
.full_container{ top: 0, right: 0, bottom: 0, left: 0 }
In your scenario, since you want the 100px top and left padding you can do,
.full_container{ top: 100px, left: 100px, right: 0, bottom: 0 }
Note, this is assuming you are using absolute positioning.
Related
I have a div and I want it to fill the whole page without any horizontal or vertical scrolling.
The html is like:
<body>
<div class="container">
</div>
</body>
and the css like:
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
Normally with vh it works, but because of some padding applied on container it doesn't work. So what technique can I use to solve this problem?
The JSFiddle is here
Try using box-sizing: border-box on your .container element. Doing so will have the padding and border of an element included with width and height assignments.
.container {
box-sizing: border-box;
margin: 0 auto;
padding: 20px;
width: 800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
This has to do with the way that css adds the padding to the height to calculate the total height. There's one quick and flexible fix for all of your elements though, as explained in Paul Irish's box-sizing:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Not Sure Will this help you but you can give it a try-
give position relative to your body and position fixed to your div.container with width 100% and height 100%.
body{
background: #222;
margin:0;
padding: 0;
position:relative;
}
.container{
position:fixed;
left:0;
top:0;
width:100%;
background: red;
height: 100%;
}
Box-sizing FTW! If you need to include the padding as part of the elements dimensions then box-sizing: border-box is your only hope.
FWIW you should be aware that Viewport Units are not fully supported so if you need something more cross-browser you can easily avoid using 100vh by using 100% instead.
E.G:
html, body {
height:100%;
min-height:100%;
}
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: red;
height: 100%;
box-sizing: border-box;
}
<div class="container">
</div>
I have a <div>, with fixed height and padding. The border-box property is applied on the whole page. Inside the <div> I have an <img> with max-width:100%, and max-height:100% properties. My problem is the container is wider than excepted (I think because of the padding).
What is the best solution to add padding around the image without breaking the design OR how to fix it?
I saved it to JSFiddle (http://jsfiddle.net/4eo6bebj/) and I also added it to my question.
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#responsive-image {
height:150px;
border:1px solid red;
display:inline-block;
float:left;
padding:15px;
}
img {
max-width:100%;
max-height:100%;
}
<div id="responsive-image">
<img src="http://lorempixel.com/400/200/sports/">
</div>
Update: The problem is visible in Firefox.
You could remove the padding from the div and add it into inner elements.
http://jsfiddle.net/6ux1wjLc/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#responsive-image {
height:150px;
border:1px solid red;
float:left;
}
#responsive-image * {
padding: 10px;
}
img {
max-width:100%;
max-height:100%;
}
<div id="responsive-image">
<img src="http://lorempixel.com/400/200/sports/" />
</div>
I want place two images in one row, and add 10px spacing between them.
Since layout is responsive, the row should break on mobile screen and images should go one above the other.
Sample layout
I use just two images without extra code, it works, but there definitely should be better, more reliable way, using div containers that also allowing to add aligning to images(I need vertical-align:middle). What is better CSS to achieve this, specifically for this layout?
Maybe this can help you.
Place the images inside a div with a width of 50%. To add the padding you can use box-sizing: border-box;
<div class="row">
<div class="left ">
<img src="http://www.codewithsonia.com/stuff/img/vader.jpg" />
</div>
<div class="right ">
<img src="http://www.codewithsonia.com/stuff/img/vader.jpg" />
</div>
</div>
Make the images responsive by setting max-width to 100%
img {
max-width: 100%;
}
.left{
width:50%;
float: left;
position: relative;
border-right:5px solid green;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.right{
width:50%;
padding-right: 0px;
float: right;
border-left:5px solid red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row:after {
clear: both;
}
#media screen and (max-width: 300px) {
.right {
width:100%;
border-left:0;
clear:right;
}
.left{
width:100%;
border-right:0;
clear:right;
}
}
You can see a fiddle here
http://jsfiddle.net/f4bt5Lq0/1/
I am dividing my screen to 4 Quarters but it doesn't work with all screen resolutions.I need it to always be 4quarters even by changing the window size.
here is the code:
body{
height:800px;
}
div{
position:relative;
border:1px solid red;
width:49.7%;
height:49.7%;
}
#Q1,#Q3{
float:left;
}
#Q2,#Q4{
float:right;
}
</style>
</head>
<body>
<div id="Q1"> </div>
<div id="Q2"> </div>
<div id="Q3"> </div>
<div id="Q4"> </div>
</body>
Use this CSS to make the height 100% and quarter it:
body{
height:100%;
}
html {
height: 100%;
}
div{
position:relative;
border:1px solid red;
width: 50%;
height: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#Q1,#Q3{
float:left;
}
#Q2,#Q4{
float:right;
}
The computed width of the boxes exceeds the total available space in lower screens. This is because the border of 1px around the elements.
You could give the div elements a box-sizing: border-box; declaration so that their width would be calculated including padding and borders.
Example Here
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
In addition, if you want to resize the height of the boxes with the respect to the height of the body, note to set height: 100% on body and html as well.
You have to specify the height of html to get height: 100% to work for the <body>. This because a percentage value of height property is relative to the height of box's containing block.
Updated Example Here
html, body {
height: 100%;
padding : 0;
margin : 0; /* Remove the default 8px margin around the body */
}
Also note that UAs apply a default margin to the <body> by default. Make sure you have reset the user agent stylesheet.
<div id="colorscheme">
</div>
<div id="content">
<div id="display_saved">
TEXT TEXT TEXT
</div>
This is HTML structure of related to issue document.
CSS:
#colorscheme{
width:25%;
display:inline-block;
height: 50px;
background:green;
}
#content{
width:50%;
display:inline-block;
background: gray;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#display_saved{
border: solid 1px red;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:100%;
}
JSfiddle
As you can see from the feedle, there is some space between #colorscheme and #content, despite there is no margins, and there is border-box property. How can I reduce it?
Inline block can cause whitespace issues and I would recommend floating the elements.
Have a look at this forked example - http://jsfiddle.net/DkhDm/1/
It's also worth noting that display inline-block lacks support in some browsers - which is another reason to always use floats ahead of it! You do however have the small added complication of clearing the floats but this is easily achieved.
#colorscheme{
width:25%;
float: left;
height: 50px;
background:green;
}
#content{
width:50%;
float: left;
background: gray;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#display_saved{
border: solid 1px red;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:100%;
}
It's just whitespace, which is logical because you've reduced your blocklevel elements to inline blocks explicitly. Eliminate the whitespace and it'll go away:
<div id="colorscheme"></div><div id="content"><div id="display_saved">TEXT TEXT TEXT </div></div>
DEMO
CSS:
#colorscheme{
width:25%;
display:block;
height: 50px;
background:green;
float:left;
}
i have added float:left; and changed to display:block;
You can move the elements back into place with negative 4px of margin. (Not in IE6,7). inline-block do cause whitespace, i don't think it's a bug and it's rather nice to have when using inline-block on text-elements.
#colorscheme{
margin-right: -4px;
width:25%;
display:inline-block;
height: 50px;
background:green;
}
You can also use html comments to eliminate the whitespace.
<div>
<p>Content</p>
</div><!--
--><div>
<p>More content</p>
</div>