I am trying to do some step by step (4 steps in total) checkout. I thought about having a kind of a horizontal slider setup.
I created a container with a width of 400% containing 4 containers. These containers should be side by side and fill 100% of the Window. This is kind of a horizontal slider but i want to use it as a form.
[[[Container 1][Container 2][Container 3][Container 4]]]
My html:
<div class="container fullWidth">
<div id="checkoutContainer">
<div class="checkout" id="cart">Cart</div>
<div class="checkout" id="contact">Contact</div>
<div class="checkout" id="address">Addresse</div>
<div class="checkout" id="overview">Übersicht</div>
<div class="checkout" id="thankyou">Danke</div>
</div>
</div>
My CSS:
.container.fullWidth {
width : 100%;
overflow-x: hidden;
}
div#checkoutContainer {
background-image: url(../img/background.jpg);
background-repeat : repeat-x;
width : 500%;
height : 657px;
}
div#checkoutContainer div.checkout {
float : left;
width : 900px;
height : 657px;
}
The question is now: Can i somehow make the single divs fill the width of the page without using javascript (I know i can detect the page width and set the width)? Setting div.checkout { width : 100% }does not work as they will stack on each other then.
Check out my approach, divs will fill the container so no need to 'fine tune', plus it is responsive and not dependent on the number of divs
HTML
<div id="checkoutContainer">
<div class="checkout" id="cart">Cart</div>
<div class="checkout" id="contact">Contact</div>
<div class="checkout" id="address">Addresse</div>
<div class="checkout" id="overview">Übersicht</div>
<div class="checkout" id="thankyou">Danke</div>
</div>
CSS
#checkoutContainer {
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.checkout {
display:inline-block;
width : 100%;
height : 200px;
vertical-align: top;
}
See working example
Quick Example:
http://jsfiddle.net/DTTnB/
You can fine-tune this how you want
I took off overflow-x: hidden so you can see that they lie horizontally
.
you were on the right track
Key differences:
I made each of the containers only a proportion of their wrapping container:
.checkout:
width : 20%;
Their wrapping container I made it wide enough to accommodate all containers so that each container would take up at least the page width.
checkoutContainer:
width : 1000%;
you can fine tune this
Related
I am working on a grid layout using css flex styling and want a total css solution, if possible, I have the means to fix it with javascript.
When a row exceeds the viewport width, it displays the scrollbar,
but when you scroll, the styling of the row element remains the size of the viewport,
it does not seem to "wrap" all of its children.
see : fiddle
Try scrolling, you will see the yellow row (.sk_row) class does not appear around all its children.
A solution would be fine, but I would like to know why the parent does not visually contain all children. I think I may be missing some key concept about flexboxes...
Duplicate of fiddle code...
<body>
<div id='pg_wrap'>
<div id='frm0'>
<div class='sk_scrl'>
<div class='sk_row'>
<div class='itm_val'>row 1</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
<div class='sk_row'>
<div class='itm_val'>row 2</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
</div>
</div>
</div>
#frm0{ width:420px;height:200px}
.sk_scrl{ overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
display:flex;
justify-content:flex-start;
align-items:center;
background:#ff0;border:2px #f00 solid;
height:50px}
.itm_val{
display:flex;
border:1px #000 solid;background:#666;
flex:0 0 100px; height:30px; margin:0 5px;
align-items:center;justify-content:center}
Note : this is not the same as question
That op wants to change child behaviour, I want the parent to change.
It's not working the way you want because .sk_row inherits the width, in this case from #frm0:
#frm0 { width: 420px; }
With the class .sk_scrl you can't see it very well, because it's set to:
.sk_scrl { overflow: auto; }
If you use your browsers developer tools (assuming you have any), you'll see that the elements wrapped around your .itm_val divs are all 420 pixel wide. The reason the .itm_val divs are all visible outside of their container, is because they are "overflowing" out of their containing div.
Here's an example for how the width-inheriting-thing works:
<div class="container">
<div class="element"></div>
</div>
If you set the the width of .container to 50%, it will use up half of the available width within the window. If, however, you want .element to take up the full width of the window, you will have to adjust the width like this:
.element {
width: 200%;
}
If it were set to 100%, it would only be as wide as .container.
Here's a fiddle: http://jsfiddle.net/Niffler/n8hmpv13/
I warned you, I can be a little vague
Anyway, what I am after are those pages that fill the whole screen, but if you scroll down and you come to a different section ( some specific content or just a footer), it breaks away from the previous content by having a different background.
Sorry, if I sleep on it, I can maybe come up whith a better explanation and/or an example page.
Does that style have a name and how is it done? If it needs to be responsive?
thanks
Yes. It's simple to do. Setup like so, and customize to your heart's content.
<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>
CSS:
.container {
width: 100%;
text-align: center;
}
.wrapper {
margin: 0px auto;
width: 70%;
text-align: left;
}
The parent (container) <div>s will stretch to 100% page width. The child (wrapper) <div>s will stretch to 70% of their parents (or, you can set this to fixed pixel dimensions and change based upon screen dimensions) and will be centered. You apply decorative backgrounds to the parent .container like:
#header {
background: #ff0000;
}
#footer {
background: #000;
}
#content {
background: url(img/bg_pattern.gif);
}
#feature_area {
background: url(img/hero_feature_img.jpg) top center no-repeat;
}
I am trying to contain a div's borders within its parent div, and I would like the overflow text from the child div to automatically put a scroll-bar on the child div. I have tried everything that I can think of, but I do not know of a way to do that which I am trying to do. Could someone please offer me some advice on how to do this as efficiently as possible?
My parent div has a percentage-defined height though
This should not be a problem, as long as parents has an height that has a valid value.You can set a height or a max-height width a percentage value.
max-height, will let it grow untill it matches the max value.
http://jsfiddle.net/E2Mfa/
For instance this style sheet:
html, body, .childContainer1 {
height:100%;
background:#edf;
}
body, div, p {
margin:0;
}
.parentContainer {
height:25%;
background:#fed;
}
.childContainer1 {
overflow:auto;
}
.childContainer2 {
max-height:100%;
background:#def;
overflow:auto;
}
If you remove height from html or body, it doesnt work anymore.
When you give percentage height, it calculates it from its parent height.
If no height found in CSS parent, then there is no value to calculate from.
max-height returns no values avalaible to calculate a percentage height for the childs
The structure used here :
<div class="parentContainer">
<div class="childContainer1">
...
</div>
</div>
<div class="parentContainer">
<div class="childContainer2">
...
</div>
</div>
<div class="parentContainer">
<div class="childContainer1">
...
</div>
</div>
<div class="parentContainer">
<div class="childContainer2">
...
</div>
</div>
Does your parent div have an absolute size? If it does you could so something like this:
<div style="width:100px;height:100px;">
<div style="position:absolute;overflow:auto;border:solid black 1px;">My Content</div>
</div>
Check this (not sure wether you want something like this),
<div class="outer-div">
<div class="inner-div">Test content Test content Test content Test content Test content Test content Test content Test content Test content Test content</div>
</div>
.outer-div {
width :200px;
height :100px;
border: 1px solid gray;
}
.inner-div {
width :50%;
height :75px;
border: 1px solid black;
overflow: auto;
}
Demo Fiddle
I'm adapting the hero template from bootstrap.
Nested in the hero-unit div I would like to have two divs to be rendered in wide screens, side by side, like:
|text 30% container width||picture the rest of container width|
and in narrow screens (smartphone) stacked:
|text full container width|
|picture full container width|
Any idea?
Use media queries to create different styles for different sized screens.
For the full size screen you could do:
<div id="left" class="cont">
</div>
<div id="right" class="cont">
</div>
CSS:
#left{
float: left;
width: 30%;
}
#right{
overflow: hidden;
}
The above layout will have the left div floating to the left, with a width of 30% and the right div will take up the remainder of the space.
For the mobile screen, your CSS will vary slightly.
<div id="left" class="cont">
</div>
<div id="right" class="cont">
</div>
CSS:
.cont{
width: 100%;
float: left;
clear: both;
/* Margins, padding, etc. */
}
Can't you just use the built in grid system?
<div class="hero-unit">
<div class="row-fluid">
<div class="span3">text</div>
<div class="span9"><img src="img.jpg"></div>
</div>
</div>
I have following kind of pattern. How to apply a css changes for first and second childDiv class to 50% to the parent div
How do I set 50%, 50% to the child div?
<div class="parentDiv">
<div class="childDiv"> // 50% width
</div>
<div class="childDiv"> // 50% width
</div>
</div>
.childDiv{
display:inline-block;
width:50%;
}
Example
Important notes:
don't leave whitespaces between the divs
You might as well use floats instead of display:inline-block;
If the elements don't align in the example, you browser does not support box-sizing, just omit the border then (it was for illustration purposes only).
There's a bit of a trick here, of which you need to be aware. If you put any whitespace between the closing of the first div and the opening of the second, your 50% won't work because of the space being displayed in the browser.
There are a couple ways to do this. If you are targetting only modern browsers (IE9+, FF, Chrome, Safari), you can use inline-block:
<style>
.childDiv {
display: inline-block;
width: 50%;
}
</style>
<div class="parentDiv">
<div class="childDiv"> // 50% width
</div><div class="childDiv"> // 50% width
</div>
</div>
However, IE7 doesn't support inline-block, so you can go to the "old-school" method, using floats:
<style>
.childDiv {
float: left;
width: 50%;
}
</style>
<div class="parentDiv">
<div class="childDiv"> // 50% width
</div><div class="childDiv"> // 50% width
</div>
<div style="clear: both"></div>
</div>
If you want to ensure both columns are exactly the same width and still have a small gap between them, use different styles of floats. Note this method doesn't require that you eliminate whitespace in your markup between divs, as long as the width you use is less than 50%:
<style>
.childDiv {
width: 49.5%;
}
.left { float: left; }
.right{ float: right; }
</style>
<div class="parentDiv">
<div class="childDiv left"> // 49.5% width
</div>
<div class="childDiv right"> // 49.5% width
</div>
<div style="clear: both"></div>
</div>
set parent width to something first.
.parentDiv
{
width: //insert width of the parentDIV
}
And then afterwards set the childDiv width.