Pretty common question, and typically revolves around a current situation, so after reading up on a bunch of different solutions and trying to slide them in I thought I'd just ask the age old question myself based on my situation.
Situation
I've built a little page slider using jQuery, and it appears to work as expected, then I noticed the CSS height was still set to a default value I had used for testing. After removing it I can't seem to get the height of the parent to open to the height of the different children. I know that setting the position of the different divs to relative instead of absolute will display them, but then the divs aren't positioned correctly anymore (situated underneath each other). Other solutions I've found revolve around not using markup that is even remotely common to my own.
Question
Is there a CSS fix for this that allows me to leverage Bootstrap the way I have it set up, and the jQuery animation I've already written? Or is their any suggestion(s) that will make this work without too much alteration to the markup? I've tried a couple different variations and this seems to be the most stable.
Code
I've added it to a jsFiddle. I couldn't get the animation to work in the fiddle for some reason (works on my laptop in all browsers), but the default layout should be enough to see how the parent doesn't respect the child elements.
<style>
.container {
margin-top: 50px;
}
.row {
margin-bottom: 20px;
}
.windowBox {
overflow: hidden;
}
.box {
background-color: #FFF;
position: absolute;
width: 100%;
}
.page1 {
top: 0;
left: 0;
opacity: 1;
z-index: 999; /* set to be over page2 onload */
}
.page2 {
top: 0;
left: 0;
opacity: 0;
z-index: 99; /* set to be under page1 onload */
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-12">Header text should be above either page.</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
<button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 windowBox">
<div class="row">
<div class="box page1">
<div class="hidden-xs col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
<div class="box page2">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Footer text should be under either page.</div>
</div>
</div>
DEMO
Added an .over class to your markup.
Thats the only change made there.
css
Over class is the container of the windowBox.
We want this to have a hidden overflow because it will contain all our pages side by side.
.over {
overflow: hidden;
}
This is a fixed value unfortunately. Basically its the width of your window X pages. If your going to add more then just one page, you can set this value in JavaScript.
.windowBox {
width: 220vw;
}
Then we simply set the container to be a "kind of" fixed width.
responsive width.. so 95 of view port width is reasonable.
.box {
background-color: #FFF;
width: 95vw;
display: inline-block;
float: left;
}
And in the JavaScript instead of setting the left property you set the margin-left.
You only need to do this for the first element so. If you want to scroll to page 4 you can set the first pages margin to -4 * 95vw
Related
I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
the right Div on my html-page contains only some rows of thumnails - created dynamically in javascript - while the left Div contains 3 Sub-Divs (inner Divs) arranged vertically (also dynamically created on receiving my query-result from my webService)
In order to make it look balanced I want the
left Div to automatically adjust to the same height
as the right one (which holds the dynamically inserted thumbnails).
The 3 vertical aligned Sub-Divs in the left Div should behave like this:
Div2 with the larger Image should be vertically centered
Div1 with the header text should be vertically centered in the space above Div2
Div3 with the title text should be vertically centered in the space below Div2
.
question:
is this possible with css ?
- i.e. without calculation of the heights on dynamic creation in javascript
.
if this is possible with css
then, please, give me some hints
about which float, display, align, margin (and similar) settings
I could try for the left Container Div and for its 3 inner Divs.
I do not need to get a sample or a solution resp.
but I need some hints in plain words, some ideas
that I could try out,
and some considerations (tipps) which I should obey.
many thanks in advance.
Flexbox can do what you need:
jsfiddle: https://jsfiddle.net/ornx7oar/
.main {
display: flex;
}
.left-panel {
padding: 5px; margin-right: 5px;
background-color: green;
/*width: 30%;*/
flex: 0 0 30%; /* don't grow or shrink based on contents, 30% width (put auto if you prefer to use the width property) */
display: flex;
flex-direction: column; /* align vertically */
justify-content: space-around; /* center vertically */
}
.right-panel {}
.thumb {height: 70px; width: 150px; border: 1px solid; display: inline-block;}
* { box-sizing: border-box; margin: 0; }
<div class="main">
<div class="left-panel">
<div>first</div>
<div>second</div>
<div>third</div>
</div>
<div class="right-panel">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
I would add the same class to all three divs. In your css, add margin: 10px auto; Depending on the current code you might need to add position: relative to this class as well.
You can tweak the 10px part depending on how far apart you want them. The auto centers the divs to its parent.
As far as changing the order look at w3 schools documentation on order
The problem occurred on other projects, but then I made all the divs the same size. I made a print screen of my problem.
As you can see the the third div is a little longer then the others (and yes I want to keep this). My css or bootstrap wants to skip a row.
html
<div ng-repeat="work in myWork" class="col-lg-3 col-md-3 col-xs-12" id="myWorkHolders">
css
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
}
Problem
DIVS skip a row when the div above is not the same size as the others.
Question
what Css terms can I use so the divs will display under each other despite different sizes.
you can add an extra class with min-height to every div, just match the height of ur largest div and put that into css class.
<style>
.yourclass {
min-height:Xpx; //replace X with the height of your largest div.
}
</style>
and now just put this class into every div as:
<div class="col-md-3 yourclass">.col-md-3</div>
I have run into this problem before; I'm curious what other people say. Not sure if this is the best solution, but what I did that worked for me was assign a min-height to those divs. the min-height you assign will depend on the height of your largest div.
so:
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
/* the exact height specified will have to be experimented with */
min-height: 250px;
}
With bootstrap you need to use the row class to make sure the columns layout correctly no matter the height a particular column.
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
So when creating your loop you need to think about how to add in the row container after every fourth column.
I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE
I've been trying this for a while with no luck. I have a parent <div> tag (lets say it's set to 300px in width). I am trying to add a series of smaller <div> tags to go inside the parent, and be placed side by side until the edge of the parent <div> where the next child <div> will then be placed on the "next line". Basically, I am trying to make these child <div> tags act like words being word wrapped.
I have googled this like crazy, but I can't find any way to really do this without calculating the sizing of everything and manually placing the child <div>'s with absolute coordinates, which I can do, but I'd like to avoid. Sp first, I was wondering if there was a css or javascript approach that could supply the same behavior.
The number of child divs is variable, and I am using C# server side code to calculate them. But it shouldn't matter which server language I'm using.
Thanks!
Try this:
Approach 1
Use display: inline-block;
HTML:
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS:
html, body { height: 100%; }
#parent {
background-color: lightblue;
width: 300px;
height: 100%;
}
.child {
width: 50px;
height: 100px;
display: inline-block;
background-color: red;
}
Demonstration.
<hr>
<h2>Approach 2</h2>
Use float: left;
HTML:
<div id="parent">
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
</div>
CSS:
html, body { height: 100%; }
#parent {
background-color: lightblue;
width: 300px;
height: 100%;
}
#child {
width: 50px;
height: 100px;
float:left;
background-color: red;
margin: 2px;
}
Demonstration.
Floating is a totally reasonable way to do it.
Alternatively you could use elements with CSS display:inline or display:inline-block . Both are automatically positioned by the browser as you describe, side-by-side and "wrapping" when they run out of space. The difference is that inline elements don't give you as much control over padding, dimensions etc., whereas inline-block elements give you all the perks of a display:block element. However IE6 does have some difficulty with inline-block elements, as I recall, which is irritating.
If you want to use inline elements, just switch your child divs to spans: spans are inline by default, no further work necessary. However there are no elements that display inline-block by default, so if you need to use this you may as well keep your divs.
Hopefully you have some options there.
Why don't you just float: left the child divs?