I have 2 div columns set to val%, within those columns I then have some smaller static width / height boxes ..
.. and on the other side a variable width / height column.
However as I vary the width of the browser window, these divs overlap.
I have tried various combinations of overflow / float / min and maximum heights etc but I am not getting anywhere.
Can someone point out what I'm missing?
Rough jsfiddle:
http://jsfiddle.net/2xdcases/
Actual Page:
https://www.ablueman.co.uk/testbench/newindex/
.content {
margin: 2px 0px 2px 0px;
border-bottom: 1px solid #BABABA;
padding: 10px 10px 10px 10px;
background-color: #b0c4de;
}
.cont {
float:left;
width:48%;
margin: 1px 0px 1px 0px;
border-bottom: 1px solid #BABABA;
padding: 5px 5px 5px 5px;
/*background-color: #b0c4de;*/
/* min-height: 600px; */
}
.co {
float:left;
width: 200px;
Height: 300px;
margin: 1px 0px 1px 0px;
border: 1px solid #BABABA;
padding: 2px 2px 2px 2px;
overflow:auto;
}
Give #contentWrapper overflow: hidden;
Because the elements on the left are floated, the parent element will not change its size accordingly
For more information read this: http://css-tricks.com/all-about-floats/ (especially under the heading 'The great collapse')
Related
As I understand box-sizing, box-sizing:border-box makes it so that
width = border-left-width + padding-left + <free space> + padding-right + border-right-width
At least, that is exactly what happens if I set
div {
box-sizing: border-box;
width: 200px;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div>170px free space</div>
So, from my understanding, width defines the "overall width" of the element. However, if the width is smaller than the sum of paddings+border-widths, weird things happen:
div, span, input {
box-sizing: border-box;
width: 0; /* <= */
border-top: none;
border-bottom: none;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div></div>
<br>
<span></span>
<br>
<input>
Divs behave as expected, spans seem to show everything "left" from the "<free space>", and inputs show everything (and just have a 0px "<free space>").
What explains this behavior?
Edit: span{display:block} makes the span behave as the div, which makes it at least a bit understandable. But input{display:block} does not have the same effect. Why?
div, span, input {
box-sizing: border-box;
width: 0;
display: block; /* <= */
border-top: none;
border-bottom: none;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div></div>
<br>
<span></span>
<br>
<input>
if you add a height to the elements you will see they are all the same.
div, span, input {
display: block;
box-sizing: border-box;
width: 0;
padding: 0 10px;
border: solid green;
border-width: 0 5px 0 5px;
background: #ebebeb;
height: 20px;
}
<div></div>
<br>
<span></span>
<br>
<input>
the "element" itself is 0 width, shown by the blue box
padding is 10px on both sides
border is 5px on both sides
resulting in a total box-sizing width of 30px
Needing to have 2 divs side by side
I have one div with a background image of 62px and the other div needs to take up the remaining container divs width.
Search-box1 will be the div that expands to fill the remainder of container search which will be at different sizes depending on what size screen its viewed on.
So i need the search-button1's size to stay at 62px width while search-box1 fills the remainder when containersearch stretches to fill responsively.
<div class = "containersearch">
<div class="search-box1"></div><div class="search-button1"></div></div>
.search-box1{
background: #ffffff;
border: 1px solid #000000;
width:99%;
height:30px;
padding:5px 5px 5px 5px;
display: inline-block;
}
.search-button1{
background-image: url('search-button.png');
width:62px;
height:20px;
display: inline-block;
}
.containersearch
{border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width: 100%;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
You can try to use CSS calc() Function, something like
width: calc(100% - 62px);
http://www.w3schools.com/cssref/func_calc.asp
https://jsfiddle.net/ns2352gt/
Maybe your looking something like this..
body{
margin:0;
}
.containersearch
{
border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width:100%
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
input[type=text]
{
position:relative;
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-image:
url('http://findicons.com/files/icons/2226/matte_basic/32/search.png');
background-repeat: no-repeat;
background-position: right;
background-color: white;
padding: 12px 20px 12px 10px;
}
input[type=text]:focus {
width: 100%;
}
<body>
<div class = "containersearch">
<form>
<input type="text" name="search" placeholder="Search.."/>
</form>
</div>
</body>
I have a parent <div> tag and it's child <div> tag.
The height of the child <div> tag is dynamic and varies depending upon certain logic.
The height of the parent <div> tag should also vary depending upon the height of the child <div> tag and this is happening in browsers like Chrome, Firefox and Opera, but not in IE11. This is making the UI look like the child <div> tag is going beyond the parent <div> tag at the bottom of the page.
My question is- Is there a way I can make sure that child <div> tag remains within the boundaries of the parent<div> tag?
UPDATE: adding css...
.child {
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
min-height: 749px;
background-color: white;
display:table;
float:right;
min-width: 900px;
position:absolute;
overflow: visible;
height:100%;
}
.parent {
overflow: visible;
min-height: 100%;
height: 100%;
padding: 13px 25px 75px 25px;
min-width: 900px;
}
set .parent height to auto not 100%, i.e:
.parent {
overflow: visible;
min-height: 100%;
height: auto;
padding: 13px 25px 75px 25px;
min-width: 900px;
}
I'm having issues getting my content box to extend to encompass everything within it. shouldnt max-height:100% do this?
http://codepen.io/anon/pen/xujAC
There's the codepen of my code. The red and blue background are for visual reference only.
Shouldnt the blue background (.container) only extend 20px below the blocks?
Pretty new at this and learning as I go. I'm probably missing something easy.
Thanks a lot.
You have the height of your .container set to 100%. In this sample, it will be as tall as its containing element. Because its top is set to 80px and its height is that of its parent, it will extend below the bottom by ~ 80px.
Other things that throw this off are:
floated elements are outside the regular flow which means the containing element can't calculate the height of its children. In this case, I think the simplest fix would be to use position: inline-block; for the children.
The child elements banner and container are absolutely positioned. This also take them outside the flow of the document. In this example, I believe you can get the results you are looking for using relative positioning.
Margins are also throwing off the layout. Here you can using padding in #content to achieve better results.
Demo fiddle
Updated CSS:
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background-color: #dcdcdc;
position: relative;
}
#content {
position:relative;
margin: 0 auto;
width: 960px;
min-height: 500px;
max-height: 100%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 2px 2px #111;
background-color: red;
padding: 20px;
padding-top: 0;
}
#banner {
width: 900px;
position: relative;
margin: 0 auto;
padding: 0;
text-align: center;
border-top: 1px solid #888;
border-bottom: 1px solid #888;
top: 15px;
left: 30px;
height: 100px;
box-shadow: 0 2px 0 #ddd;
}
#banner h2 {
color: #555;
text-shadow: 0 -1px 0 #000;
}
.container {
margin: 0 auto;
padding: 0;
position: relative;
background-color: blue;
}
.blocks {
display: inline-block;
width: 250px;
height: 150px;
background-color: #666;
margin: 25px;
margin-top: 30px;
}
I have some floating elements on a page.
What I want is the div that is floated left to be "maximally wide" so that it is as wide as it possibly can be without causing the red div ("I go at the right") to spill over onto the next line.
An example is here: The width:100%; doesn't produce the desired effect!
** I don't want the green element ("I want to be as wide as possible") to go "under" the red element. Its very important that they both stay separate i.e. .. I think they must both be floated!
<div class="container">
<div class="a1">i go at the right</div>
<div class="a2">i want to be as wide as possible,</div>
<div class="clear"></div>
</div>
<style>
div
{
border: solid 2px #000;
background-color: #eee;
margin: 8px;
padding: 8px;
}
div.a1
{
float:right;
background-color: #a00;
border: solid 2px #f00;
margin: 12px;
padding: 6px;
}
div.a2
{
float: left;
/*width: 100%;*/ /*this doens't produce desired effect!*/
background-color: #0b0;
border: solid 2px #0f0;
margin: 12px;
padding: 14px;
}
.clear
{
border: none;
padding: 0 ;
margin: 0;
clear:both;
}
</style>
Work with percentages:
div.a1
{
float:right;
background-color: #a00;
border: solid 2px #f00;
margin: 2%px;
padding: 6px;
width: 8%;
}
div.a2
{
float: left;
width: 84%;
background-color: #0b0;
border: solid 2px #0f0;
margin: 2%px;
padding: 14px;
}
Play with the widths, heights and margins % to get the desired look. Just remember that margin: sets right and left margins therefore margin: 2% uses 4% of the wrapper's width. Margins + widths should sum 100%, in this case (2%*2)*2 + 84% + 8% = 100%.