I'm working on a product display page. I want my divs to act like the second example from this URL: http://css-tricks.com/examples/FluidEqualHeightFauxColumns/
But the number of divs in the same line might be different each time. And if there are too many divs, those will continue on the next line.
Is it possible to do this without JavaScript?
Thanks in advance!
HTML:
<div class="outer">
<div class="inner">aaaaaaaaaaa<br />aaaaaaaaaaa</div>
<div class="inner">2</div>
<div class="inner">3aaaaaaa</div>
<div class="inner">4</div>
<div />
.outer
{
overflow: hidden;
width: 500px; /* or a fixed width */
}
CSS:
.inner
{
float: left;
/* style as you please */
border: solid 1px black;
}
Try this:
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div />
The CSS:
.outer
{
overflow: hidden;
width: 80%; /* or a fixed width */
}
.inner
{
float: left;
/* style as you please */
width: 64px;
height: 64px;
}
The outer div will adapt its height to the items contained, while the inner items will always maintain their exact size. When the outer div is too small, the inner boxes will flow to a new line. Isn't that what you wanted?
Related
I have a slightly unusual CSS challenge to overcome.
I have a two column layout, whereby the width of the left column is set by the width of a main image, and the right allowed to fill the remaining space. There is a container under the main image, which could have a natural width greater than the main image. However, I want this div to be the same width as the main image, and the overflow to be hidden. Here is my effort at attempting this:
.outer {
margin-right: 5px;
position: relative;
}
.left {
float: left;
}
.right {
width: auto;
overflow: hidden;
}
.contentOuter {
overflow: hidden;
}
.content {
width: 500px;
}
.inner {
background-color: grey;
color: white;
width: 100%;
height: 150px;
}
<div class="outer left">
<div class="image">
<img src="http://placehold.it/350x150" />
</div>
<div class="contentOuter">
<div class="content">
<img src="http://placehold.it/500x50" />
</div>
</div>
</div>
<div class="outer right">
<div class="inner">
Hello world!
</div>
</div>
But as you can see, .contentOuter stretches to the width of its contents, regardless of what I attempt.
One major caveat I have is that apart from .content having a fixed width, I don't want any other hard-coded widths in my CSS; everything should be completely fluid, and the dimensions of the columns determined by the dimensions of the .image img.
So, I am after something that visually looks like this, but without the hard-coded max-width on .content:
.outer {
margin-right: 5px;
position: relative;
}
.left {
float: left;
}
.right {
width: auto;
overflow: hidden;
}
.contentOuter {
overflow: hidden;
}
.content {
max-width: 350px; /* Hard-coded for demo purposes */
}
.inner {
background-color: grey;
color: white;
width: 100%;
height: 150px;
}
<div class="outer left">
<div class="image">
<img src="http://placehold.it/350x150" />
</div>
<div class="contentOuter">
<div class="content">
<img src="http://placehold.it/500x50" />
</div>
</div>
</div>
<div class="outer right">
<div class="inner">
Hello world!
</div>
</div>
One option, though that depends on further requirements you may have, it so simply add to the lower block:
position: absolute;
width: 100%;
This takes it out of the flow, and the enclosing element will not take its width into account for sizing, only that of the image on top. The overflow: hidden will then hide whatever overflows.
The drawback is that the height of the enclosing element (or the position or subsequent elements) will not take into account the size of this element.
jsFiddle: https://jsfiddle.net/jacquesc/rsz0hb1g/
A quick way to solve this would be to simply use some jQuery. It would only take two lines of code to achieve this.
var imgWidth = $('.image').width();
$('.content').width(imgWidth);
I have this markup:
<div id="wrapper">
<div id="container">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
and this CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#container {
width: 200%;
}
.block {
width: 50%;
float: left;
}
Basically all I want to do is, have 2 fullwidth divs floating next to each other, but when I put some content in them I get container centered and pieces of both divs showing, like this: http://prntscr.com/8lr4l6
What am I doing wrong?
There is no need to set the width of the wrapper and of the container. It is always 100%, if nothing else is set. Just set a width of 50% to every block and float them left.
#wrapper {
overflow: hidden;
}
.block {
float: left;
width: 50%;
}
Example
would something like this work for you: http://jsfiddle.net/swm53ran/338/
you can see the div to by commenting out overflow: hidden
<div class="container">
<div class="block block1">
This is content for div 1 This is content for div 1 This is content for div 1
</div>
<div class="block block2">
This is content for div 2 This is content for div 2 This is content for div 2
</div>
</div>
body {
overflow: hidden;
}
.container {
width: 200%;
padding: 0px;
}
.block {
display: inline-block;
width: 50%;
float: left;
outline: 1px solid gray;
}
Boy, am I a fool!?
In my case answer was pretty simple. I had left autofocus attribute on my input which were on the off screen div, and of course it automatically scrolled to that div.
Thanks everyone for answers though. :)
I have a site that is divided into two classes: right and left. The left had 3 boxes in it and the right had one. The box on the right's height would stretch or shrink to be the same as the sum of the height's of the left boxes. I have added another box underneath the box on the right and I want the same effect now with the two boxes (the sum of the height of the two boxes on the right should always equal the sum of the height of the three boxes on the left. Here is the old code that worked with the one box on the right:
<div class="right">
<div class="boxx details-history">
<div class="boxx-content">
Box content goes here
</div>
</div>
</div>
And here is the css:
.right{ float: right; display: inline; width:404px; position:relative; }
.boxx { margin-top:11px; }
.boxx:first-child { margin-top:0; }
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7;
font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px; }
.details-history .boxx-content { padding: 0 0 0 0!important; position:absolute;
left:0; right:0; bottom:0; top:22px; }
Here is the new code:
<div class="right">
<div class="boxx details-history">
<div class="boxx-content">
Box content goes here
</div>
</div>
<div class="boxx details-coursework">
<div class="boxx-content custom-scroll">
Box content goes here
</div>
</div>
</div>
I've been trying for several hours now to write some css to make this work, but i can't seem to get it right. I think the trick has something to do with taking the 'position: absolute;' out of .details-history and putting it into a new class called details-coursework, but i can't figure out exactly what to do.
I used some sort of the task. In my example, there are two boxes: left and right. The right box should automatically adjust its height according to left box's height (which may be arbitrary). There is a lot of scrollable text in the right box.
#container {
width: 200px;
}
#left-positioner-parent {
position: relative;
/* Width of the left box relative to #container.
Could be in pixels too. */
width: 50%;
}
/* Contained style to exclude use of calc()
with border width and height in #right-box */
#left-box {
border: 15px solid red;
}
#right-box {
position: absolute;
/* To exclude use of calc() */
box-sizing: border-box;
left: 100%;
width: 100%;
top: 0;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
border: 5px solid black;
}
#right-content {
/* No need of styling for this example */
}
<!-- A container for useful example width -->
<div id="container">
<!-- A different div for the left content is to allow
the left div to have borders without using CSS calc()
and border width and height in right div's style. -->
<div id="left-positioner-parent">
<div id="left-box">Left<br>block of text.</div>
<div id="right-box">
<!-- Some long scrollable content -->
<div id="right-content">Right<br>block<br>of<br>text<br>with<br>multiple<br>lines.</div>
</div>
</div>
</div>
Only way I can see this working without JS is to set heights for all the elements
HTML
<div class="wrapper">
<div class="left">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="right">
<div class="one"></div>
</div>
</div>
CSS
.left {
width : 50%;
height : 1000px;
background : rgba(0,0,200,0.1);
float : left;
}
.right {
width : 50%;
height : 1000px;
background : rgba(200,0,0,0.1);
float : right;
}
.left div {
margin : auto;
margin-top : 20px;
width : 90%;
height : 100px;
background : rgba(200,0,0,0.1);
border : #FFFFFF 1px solid;
}
.right .one {
margin : 20px auto;
width : 90%;
height : 344px;
background : rgba(200,0,0,0.1);
border : #FFFFFF 1px solid;
}
Check out this Fiddle
You have to fake it. You simply can't do this with CSS. Percentage based heights with known number of boxes could help, but you would need JS to at least calculate and set the height of the parent. Without knowing your design, the easiest way to do this is something like this:
<div class="container">
<div class="right">
Whatever Content You Want
</div>
<div class="left">
Whatever Content You Want
</div>
<div class="clear"></div>
</div>
.right {
float:right;
width:404px;
}
.left { margin-right:404px; }
.clear { clear:both; } /* Or another clearing method */
This will create what you have for columns inside of a container that is as tall as the tallest element. What you would then do is put a backgound-image on the .container element that has a 404px graphic of some sort just on the right side of it. That would make it look like the right side appear as if it is as tall as the left side, but without it actually being that tall.
I want to place divs next to each other. I dont't know number of divs, since this is dynamically created and changed. I would like to have one parent div which will have scrollbar in case there are many child divs (and their width is greater than parent).
Here's the jsFiddle example. So, basically I would like to have all this three columns, next to each other and with scrollbar on the bottom of parent div.
HTML:
<div class="content">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
CSS:
content {
width: 100px;
background- color: #355E95;
overflow: visible;
}
.column {
width: 50px;
display: inline-block;
}
Add white-space:nowrap to your parent div.
FIDDLE
You would need to use a content div for the scroll and then a wrapper for the columns, adjusting the width of the wrapper to fit all 3 of your columns (150px in your example).
The column structure is made by floating div's left, but it will float to the width of your parent container, in this case your parent container is only 100px so we need to add a wrapper for them to fit inside.
If you also want a vertical scroll you will need to set a height to your container.
Jsfiddle: http://jsfiddle.net/tYnH3/
css:
.content {
width: 100px;
background-color: #355E95;
overflow: auto;
}
.content-wrapper {
width: 150px;
}
.column {
width: 50px;
float: left;
}
html:
<div class="content">
<div class="content-wrapper">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/bdssw/
use float:left;
.column {
width: 50px;
display: inline-block;
float:left;
}
Try the following JS fiddle
http://jsfiddle.net/jT6SW/1/
#wrapper
{
float: left;
height: 150px;
width: 250px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}
use width:auto;
.content {
width: auto;
background-color: #355E95;
overflow:scrolling;
position:fixed;
}
.column {
width: 50px;
float:left;
}
http://jsfiddle.net/XqSJG/6/
I'm working on a responsive website, and I ran into some trouble doing the layout. I broke the problem down to the fewest lines possible.
When the window is larger then 909px I want to place my second content (content2) just below the title. When there is less space availible I want it to be placed below the image.
Currently it always gets placed below the image.
Here's a visual.
I need to find a solution without using absolute positioning, because the title does not have a fixed height. In fact none of my html elements have a fixed height, I do have fixed widths though.
I have been trying to come up with a simple solution for a few hours now. Here's hoping someone can point me in the right direction :)
Thanks for reading!
HTML code:
<div class="wrapper">
<h1> some title </h1>
<div class="image"> some img</div>
<div class="content1"> some content </div>
<div class="content2"> some other content </div>
</div>
CSS styles:
.content1{
float: left;
}
.image{
width: 600px;
}
.content2{
width: 300px;
float: right;
}
#screen and (min-width: 768px) and (max-width: 909px){
.wrapper {
width: 700px;
}
.content1 {
width: 300px;
}
}
#screen and (min-width: 909px){
.wrapper {
width: 900px;
}
.content1{
width: 600px;
}
}
Here is one way of doing it for the case of min-width: 909px
The CSS is:
#media screen and (min-width: 909px) {
.wrapper {
width: 900px;
outline: 1px dotted blue; /* optional for demo */
}
.image {
width: 600px;
float: left;
outline: 1px dotted blue; /* optional for demo */
}
.content1 {
float: left;
width: 600px;
outline: 1px dotted blue; /* optional for demo */
}
.content2 {
width: 300px;
margin-left: 600px;
outline: 1px dotted blue; /* optional for demo */
}
}
and the demo fiddle is: http://jsfiddle.net/audetwebdesign/WfyJL/
I did not see anything about heights, so I assume that the content will take determine the various heights of the elements.
How This Works
In your previous example, content2 is floated so its top edge is placed next to the bottom edge of the nearest, adjacent block level element, which is image.
To get the desired layout for the 900px format, float image to the left, and keep content2 in the flow but with a 600px left margin to allow the left floated elements to flow down the left hand side of content2.
maybe you need use some like this, with offsets, hope your help
<div id="wrapper">
<div class="row-fluid">
<div class="span4">
<h1> some title </h1>
</div>
<div class="span4">
<div id="image"> some img</div>
<div id="content1"> some content </div>
</div>
</div>
<div class="span8 offset5">
<div id="content2"> some other content </div>
</div>
</div>