I am trying to add a carousel-like animation to my photographic calculator
I am extremely new to javascript/html/css so I have been having some troubles doing this. :)
My idea was to fill in each table row with divs generated from an array, with all but the three divs beeing hidden by overflow:hidden of the outer container.
Here if my test jsfiddle:
table {
width:80%;
background:#ffff00;
border: 1px solid black;
position:relative;
overflow:hidden;
}
.test {
width:33.3333%;
height:100%;
background:cyan;
text-align:center;
vertical-align:center;
float: left;
position: relative;
left:0%;
top: 0px;
}
The problem is if I try to add more than 3 divs (set n=4), they wrap to the next line while I want them to stay on the same line. If I use absolute positioning then I can't use the overflow hiding (or can I?).
I am hoping there is an easy solution to this. Help?
The float: left causes elements to wrap when filling all available horizontal space. What you need to do is arrange your divs inline and make elements in your carousel not wrap:
http://jsfiddle.net/Wdnw9/19/
CSS
#box { white-space: nowrap; }
.test{
...
display: inline-block;
}
Related
Everything was going great until I attempted to text-align:center; my divs. Apparently divs that are floated left ignore text-align but the floated div needs to be that way to have two of the smaller divs on the same line as it.
It's hard to explain but here is an example of the code to describe it better:
https://jsfiddle.net/8fu5b9td/3/
.featured-series {
width:606px;
height:406px;
display:inline-block;
float:left;
margin:3px 3px 3px 3px;
background-color:black;
}
All I want to know is how to make the featured-series div act like the standard-series divs and centre itself at the same time. Thanks!
Remove the float:left; and add margin:0 auto; to it.
.featured-series {
width:606px;
height:406px;
display:inline-block;
margin:0 auto;
background-color:black;
}
Try this https://jsfiddle.net/8fu5b9td/7/
CSS
#media(max-width: 930px) {
.featured-series {
margin: 0 auto;
float: none;
}
}
#media(max-width: 610px) {
.featured-series {
background-color: black;
display: block;
height: 200px;
margin: 0 auto;
vertical-align: top;
width: 300px;
float: none;
}
}
I ended up fudging it with a little bit of JS. I know it's naughty but it does the job and it's fairly cheap on resources.
function centerContent(){
$('.center-content').width( Math.floor($('.body').width()/306)*306 );
}
setInterval( centerContent, 250);
.center-content has margin:0 auto; and it is the container for all of the series divs. I found that because I couldn't set the width, I really couldn't do much so I have JS set the width to the best possible fit depending on the screen size.
Not the cleanest solution and I'd much prefer pure JS but if it works, it works.
Edit: The .body class is an div which loads ajax inside of it, when it changes size it's basically like the changing size on a normal page.
I have a container div with the following attributes:
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
}
Inside there are multiple left floating div's. The problem is that they don't force the containing div to expand downwards, instead just overlapping and continuing outside the container div's boundary.
Left floating div's:
.cat_wrap{
border: 1px solid #000;
width:100px;
min-height:120px;
margin:0 10px 5px 0;
padding:0;
float:left;
}
If I take the left float out, the containing div does expand vertically as it should do. So how do I get the inner divs to float left but also expand the container div vertically?
you need to set overflow for the main div. overflow: auto; this will force the div container to expand and adapt to the content.
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
overflow: auto;
height: auto !important;
}
This is a common problem and is fixed using a "clearfix" solution. Setting overflow will fix this problem, however there are better solutions, like the following:
.mydiv:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .mydiv { zoom: 1; } /* IE6 */
*:first-child+html .mydiv { zoom: 1; } /* IE7 */
The main point of this solution is to trigger thehasLayoutproperty of the div. Fortunately it is enough for IE 6/7 to set the zoom to 1 in order to trigger that. Modern browsers which support the:afterpseudo element can use the first statement, which is cleaner and does not affect the overflow property.
Please note that you should avoid using the!importantstatement as suggested in the earlier answer as that is not good css. Moreover it will not allow you to control the height of the div if you wish to and does not do anything to solve the problem.
It's 2016. A good way of doing this is using flex property.
.container {
display: flex;
flex-wrap: wrap;
}
Then the child element can get rid of the old magical float property.
Check out this JSFiddle to see the effect.
Note: when the heights of children elements are not uniform, the flex way will behave differently with the float way. But it is hard to tell which one is correct.
container{
overflow: auto;
}
Insert the following at the end, before the enclosing the container
<div style="clear:both"></div>
The container will automatically expand to the the last clear:both
I'm trying to get my images to align horizontally but I seem to be doing something wrong but I have no clue what the problem is.
Here's the JSFiddle: http://jsfiddle.net/ByDAA/4/
Here's the CSS:
.imgcontainer img {
display:inline-block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
margin:0px 37px 0px 0px;
width:175px;
height:175px;
}
You should wrap each img and p with a div and use float:left. Example: fiddle
You're seeing line breaks because you explicitly put them there with <br> elements.
To achieve the intended effect, put the images and their subtexts in a separate container (div or article) and apply the display:inline-block style to that element.
try :
float: left;
and change your css - remove unneded properties
Might this be what you are after? http://jsfiddle.net/taneleero/ByDAA/7/
Assuming that you would like the "Let Us Sell It" to align with each image I added containers around each image + the text and set them to inline-blocks. For the container I assigned text-align:center so the inline-blocks would align to the center. Also I changed to images do display:block to force the text below the image.
.container {
position: absolute;
margin: auto;
width: 100%;
text-align:center;
}
.imgcontainer img {
display:block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
width:175px;
height:175px;
}
span {
display:inline-block;
margin:0px 37px 0px 0px;
}
You need to wrap each image and text element in a specific element (a div or figure).
A figure is probably best as it allows the use of the figcaption element inside it for the text.
Each figure is set as display:inline-block and vertical-align: top and the container is set to text-align:center
Codepen Example
I have a problem making a 3 column layout. I have tried all examples now online - used Google. None of this seems to solve my problem.
What I try to do is easy for people with knowledge.
Make a 3 column fluid layout that cover the whole screen.
Left column should be 230px width, fixed, height 100%.
Center column and right column should be equal width.
For both center - and right column they have to "float" into each other
Problem occur when you zoom out. Center column run away to left and make a huge white gap between center column and right column.
That is my problem.
center and right column need to be close to each other - no gap.
How can I solve this?
You can see my attempt here: Fiddle
Just zoom out, and you see the problem straight away. Need help to fix this. How?
Another problem occur if I use a div wrapper inside the center column with width set to 100%. Same problem as described above will happened. The text in both left and right column need to be float as well.
I can't use overflow:hidden because I need to - later - use a absolute div on right side of the center column to set a image arrow pointing to right column.
You mean something more like this: http://jsfiddle.net/gbRzM/?
(uses left, right and width properties to position everything)
.left {
width: 230px;
position:fixed;
background:GREEN;
}
.right {
right:0;
width:30%;
position:fixed;
background: RED;
}
.center {
left:230px;
right:30%;
position:fixed;
border:1px solid;
background:YELLOW;
}
Or more accurately this: http://jsfiddle.net/HKJvP/?
(puts center and right in a new div, so that pixels and % can be mixed, allows equal width that you specified)
.left {
width: 230px;
position:fixed;
background:GREEN;
}
.notleft{
left:230px;
height:100%;
right:0;
position:fixed;
}
.right {
right:0;
width:50%;
position:absolute;
background: RED;
}
.center {
left:0;
width:50%;
position:absolute;
border:1px solid;
background:YELLOW;
}
give a fixed width to the parent element of three columns and add class clearfix
``
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
with css, can I put a div under another div without using absolute positioning?
I have these two divs, and I would like the solid white one to appear directly under the one with the yellow opacity (but not direct in the corner, at the corner of the outline).
How can this be accomplished. I've been experimenting with z-index and relative positioning, but to no avail.
Thanks
http://jsfiddle.net/loren_hibbard/WtGsv/
Without using positioning, I added a style to your content div using negative margins:
.content {
margin-top:-100px;
}
Working demo here: http://jsfiddle.net/WtGsv/3/
I suggest adding an id to your .fixed_width div which houses the .content div though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.
However if you want to use absolute positioning, I have updated your jsfiddle here:
http://jsfiddle.net/WtGsv/12/
Basically, you add a parent div with position:relative; around your other two divs that you want to use position:absolute;
I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relative positioned container, than you wont need negative margins
Demo
HTML
<div class="wrap">
Add a line item
<div class="inner_wrap"><textarea></textarea></div>
</div>
CSS
body {
background-color: #aaaaaa;
}
.wrap {
border: 4px dashed #ff0000;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: Arial;
position: relative;
}
.inner_wrap {
position: absolute;
width: 100%;
height: 100%;
background-color: #919191;
top: 0;
}
Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/
or you can use negative margins margin-top: -100px http://jsfiddle.net/WtGsv/5/
With both solutions, the div at the bottom still takes space where it would be originally
Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/
You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.
Example HTML:
<div id="bottom">
lorem ipsum
<div id="top">
hello world
</div>
</div>
CSS:
#bottom {
background:red; /* to see dimensions */
position:relative;
}
#top {
background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Here is a JSfiddle.
If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.
I did this way
.mainUnderline{
height:8px;
background-color:yellow;
margin-top:-15px;
}
.header{
width:400px;
text-align:center;
font-weight:900;
font-size:30px;
color:black;
padding-bottom: 2%;
margin-left: auto;
margin-right: auto;
}
<div class="header">
“See line under me”
<div class="mainUnderline"></div>
</div>