I'm a newbie in HTML and CSS. Today I want to make a checkout form like that:
I want height of checkout-option-header equal 50% checkout-option's, but It always bigger than I want. Like that:
As I understand the percentage will determine size of children by size of parents.
But why I can't use it right?
CSS file:
.checkout-container {
margin-left: 10%;
margin-right: 10%;
background: black;
overflow: hidden;
}
.checkout-container .checkout-option {
margin: 5%;
background: red;
min-height: 100px;
}
.review-container {
margin: 5%;
background: yellow;
min-height: 100px;
}
.information-container {
margin: 5%;
background: blue;
min-height: 100px;
}
.checkout-container .checkout-option .checkout-option-header {
background: yellow;
min-height: 50%;
}
.checkout-option-container {
background: green;
min-height: 50px;
}
HTML file:
<div class="checkout-container">
<div class="checkout-option">
<div class="checkout-option-header"></div>
<div class="checkout-option-container"></div>
</div>
<div class="review-container"></div>
<div class="information-container"></div>
</div>
I'm not sure if I actually understand what you are asking but your code seems to be working.
http://codepen.io/TheStonedTurtle/pen/NbNNxw
I copied your code added the below CSS.
.checkout-option {
border: 5px solid white;
}
If you're whole question is trying to understand how percentages work they are dependent on the parent element. I.E. if you have an element with 500px height and you give a child 50% height it will have 250px as that is 50% of 500. See these for more info:
https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
You could also use flexbox to accomplish this with less CSS but it is a relatively new feature so it is not fully supported in I.E. yet.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox browser support: http://caniuse.com/#feat=flexbox
I copied and pasted your code but I didn't see such problem. The two boxes inside the .checkout-option are exactly 50% in height. Instead of min-height, use height because your .checkout-option is blocking the checkout-option-header.
Related
I can't understand how this works and why it centers. Why is it width: 70%; and not 50% / 25%?
I cannot get my head around this. I'm just trying to learn the basics on web dev. I'm completely stumpted.
body,
html {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
width: 70%;
}
.top-header {
background-color: yellow;
width: 100%;
height: 100px;
}
.main-content {
background-color: red;
width: 100%;
height: 25px;
}
<div class="wrapper">
<div class="top-header">
</div>
<div class="main-content">
</div>
<div class="bottom-footer">
</div>
</div>
width: 70% is just an option, it very well can be 50% or 25%. It doesn't matter. What matters is having a width when you use margin: auto. Setting the margin to auto will auto-calculate the distant of the element from its container and adjust the element in the center accordingly
setting elements to the centre in CSS, like div here we use the attribute margin: auto;
the width only ensures that it doesn't take the whole page and stretching outside of it's container.
you can also specify the margin values explicitly.
i'd also recommend using max-width instead as it will improve the resizing on your site when you want to use it on mobile.
another thing, if you want to centre text inside the div you use the text-align: center;
Why is it width: 70%; and not 50% / 25%?
This is purely the preference of the author. It could be any width, or max-width.
The important thing is that it is not 100% or auto which would cause the element to fill the entire width and make the idea of centring pointless.
div {
height: 1em;
border: 1px solid black;
background: #aaa;
margin: 1ex auto;
width: 70%;
}
div+div {
width: 50%;
}
div+div+div {
width: 25%;
}
div+div+div+div {
width: 100px;
}
div+div+div+div+div {
max-width: 80ex;
}
div+div+div+div+div {
max-width: 20px;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
I'm new to HTML and CSS so please bear with me. I am trying to create a responsive grid where a parent div has 4 child divs contained within it. Resizing the browser both vertically and horizontally when there are no margins between the child divs works successfully. However, when I begin to create margins between the child divs, resizing the browser vertically causes the bottom child div to overlap the parent div - which I do not want.
I tried using the overlap: hidden property however this causes the bottom child div to be hidden (truncated) when the browser is vertically changed - again, I do not want this behaviour.
What I want is the child divs to have equal margins and when I vertically change the browser, the child divs to be contained within the parent div, regardless of the browser vertical size.
Here is my code:
html {
width: 100%;
height: 100%;
}
body {
width: 70%;
height: 100%;
background-color: black;
margin: 0 auto;
}
#div_container {
width: 100%;
height: 100%;
background-color: white;
}
#div1 {
width: 94%;
height: 24%;
background-color: green;
margin: 0% auto 1% auto;
}
#div2 {
width: 94%;
height: 25%;
background-color: yellow;
margin: 0% auto 1% auto;
}
#div3 {
width: 94%;
height: 25%;
background-color: blue;
margin: 0% auto 1% auto;
}
#div4 {
width: 94%;
height: 25%;
background-color: red;
margin: 0% auto 1% auto;
}
<div id="div_container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
Hopefully my question makes sense - if not then please let me know.
Any help would be greatly appreciated.
Thanks
Like ckuijjer said, the vertical values are relative to the width and not to the height.
One solution would be the usage of calc.
.container div {
height: calc(25% - 21px);
width: 80%;
margin: 0 auto 28px;
background: #f00;
}
Here is an example on codepen. But the browser support isn't very good.
The percentage for the margin-top and margin-bottom is based on the width instead of the height. See the discussion in Why are margin/padding percentages in CSS always calculated against width?
It might be an option to take a look at the vh unit which allows you to set a size as a percentage of the viewports height
working on a few design changes for my website on tablets and trying to work on this idea.
So the basic structure is like so:
<div id='container'>
<div id='leftbox'>Content</div>
<div id='rightsidebar'>Sidebar</div>
</div>
What i want, is for the container to be 100% width, but keep a right hand sidebar at 260px but allow the leftbox div to always fill the width left.
I have made a fiddle to show. But heres the CSS from that fiddle first:
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
}
#leftbox {
width: 50%;
height: 500px;
background-color: #666;
float: left;
}
#rightsidebar {
width: 260px;
height: 500px;
background-color: #333;
float: right;
}
Heres the fiddle: http://jsfiddle.net/X2w3D/
In that example I have just set the width of the left div to 50% to give it a width. The aim is that if the user was to be on a web browser, and resize then there would be no gap between the leftdiv and the rightsidebar. So the rightsidebar is always the same width, but the leftdiv will always fill the rest of the div up in width.
Thanks, Craig.
You might be interested on calc
width: calc(100% - 260px);
Demo
Referrence
Have you considered using the flexbox model? It was designed to answer this kind of problem.
I updated your fiddle and added an example solution: http://jsfiddle.net/X2w3D/4/
I used display:flex; on the container, then added flex-grow:1; to the #leftbox
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
display:flex; // ADDED THIS
}
#leftbox {
flex-grow:1; // ADDED THIS
height: 500px;
background-color: #666;
float: left;
}
Edit: If you need retro-compatibility for the flexbox model, I cannot recommend the amazing flexbox.less enough. It has saved my life quite a few times.
I want to achieve the following effect: http://jsfiddle.net/3KJta/1/
However the solution I have uses a known width for the small div and the larger div. I need this to work with variable sized divs. The use case for this is a tooltip that appears above a smaller flexible sized element. The tooltip content isn't known and so the width could be anything.
So far I have:
<div class="small">
<div class="smaller"></div>
<div class="larger"></div>
</div>
and
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 2px solid black;
}
.small {
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 50px;
text-align: center;
}
.smaller {
width: 20px;
height: 20px;
border-color: red;
display: inline-block;
}
.larger {
width: 200px;
height: 200px;
border-color: blue;
display: inline-block;
margin-left: -75px /* NOTE: in reality, .small has a variable width, and so does .larger, so i can't just take off this fixed margin */
}
If you are ok with using css3 and only support modern browsers you can use transform: translateX(-50%); to center the bigger box (currently supported browsers).
See this example: http://jsfiddle.net/2SQ4S/1/
If you use and extra element you can do it:
<div class="small">
<div class="smaller"></div>
<div class="larger">
<div>I'm extra</div>
</div>
</div>
CSS
.larger {
position:relative;
left:50%;
width:8000%;
margin-left:-4000%;
text-align:center;
border:none;
}
.larger div {
width: 200px;
height: 200px;
border-color: blue;
margin:auto;
}
http://jsfiddle.net/3KJta/4/
although that does cause some issues with content being wider than the page so you would need it all in a container with overflow:hidden:
http://jsfiddle.net/3KJta/7/
All a bit ugly though. Perhaps there's a solution where you can avoid doing this. Maybe a JS solution that measures the size of the content you're trying to show and offsets it.
I'm using css tables where the last table row has height 100% - to fill up the remaining height.
FIDDLE
This works for me cross-browser (Including IE).
However, if I then add in the last table-row some divs with fixed height (this is dynamic content - I don't know how many of them there are) where the last div has height:100% - in order to fill up the last table-row. - like this:
FIDDLE -
this now doesn't work in IE (Even IE10)
What must I do to make this work in IE ?
(Edit: As correctly pointer out in the comments: It doesn't work in any browser - although in Chrome and firefox it looks like it works - the height:100% on the last div of the third row wasn't filling up the remaining height but rather taking up the complete height of row3...
So I attempted using table rows for row 3:- FIDDLE... Now this works in other browsers, but still doesn't work in IE!)
Markup
<div class="table">
<div class="row row1">row1</div>
<div class="row row2">row2</div>
<div class="row row3">
<div class="row3a">row3a</div>
<div class="row3b">row3b</div>
<div class="row3c">row3c</div> <!-- in IE this doesn't fill the last row -->
</div>
</div>
CSS
.table
{
display: table;
width: 600px;
height: 300px;
}
.row
{
display: table-row;
}
.row1
{
height: 50px;
background: pink;
}
.row2
{
height: 100px;
background: orange;
}
.row3
{
height: 100%;
background: yellow;
}
.row3a
{
height: 30px;
background: purple;
}
.row3b
{
height: 60px;
background: aqua;
}
.row3c
{
height: 100%;
background: brown;
}
Pure CSS, Cross-Browser Solution, Without using CSS Table Layout.
I actually recomend you to USE the CSS table layout if you can. (I don't know why you don't want it in your rows, its perfectly fine.)
OR the flexbox layout, although it's not properly implemented yet in all browsers..
--I just read in the comments that it didn't worked for you in IE, well: my solution does.. even with IE8.
Working Fiddle
HTML: I'm using the extra wrapper I mentioned in the comment.
<div class="table">
<div class="row1">row1</div>
<div class="row2">row2</div>
<div class="row3">
<div class="Wrapper">
<div class="row3a">row3a</div>
<div class="row3b">row3b</div>
<div class="row3c">row3c</div>
</div>
</div>
</div>
CSS: (most of it if for the backgrounds)
.table
{
width: 600px;
height: 900px;
}
.row1
{
height: 50px;
background: pink;
}
.row2
{
height: 100px;
background: orange;
}
.row3
{
background: yellow;
position: relative;
}
.row3a
{
height: 30px;
background: purple;
}
.row3b
{
height: 60px;
background: aqua;
}
.row3c
{
background: brown;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.table:before, .Wrapper:before
{
content: '';
height: 100%;
float: left;
}
.row3:after, .row3c:after
{
content: '';
display: block;
clear: left;
}
IE gives you the perfect result you wanted. You are rendering it as table-row. You don't need to set specific height to the last row for it to fill the remaining space.
You are actually doing it wrong by setting height to 100%;
Here 100% means the actual height of row3 and chrome renders it as you have written.
i.e row3c overflows its parent row3.
since you specified pixel heights for the remaining rows it won't fill. You need to specify
percentage heights for all ( row3a -> height: 20%, row3b -> height: 30%, row3c -> height: 50%)
it will work
You are giving height to table as 300px, Here is fiddle http://jsfiddle.net/yKPq3/11/ and assuming you want table to be filled 300px, you need to change .row3 to height:150px and .row3c to height:60px