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/
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. :)
Hello I have two boxes inside one container. Now the boxes are in the same ratio to each other:
<div class="container" width>
<div style="width=80%">box 1
<div>
<div style="width=20%">Box 2
</div>
</div>
</div>
</div>
What I want to do now is give Box 2 the constant width of 200px. But Box 2 should always fill exactly the rest of the container.
I hope you understand what I mean.
Is this possible?
Here a basic two colums code :
<style>
#wrapper {
margin-right: 200px;
}
#content {
float: left;
width: 100%;
background-color: #CCF;
}
#sidebar {
float: right;
width: 200px;
margin-right: -200px;
background-color: #FFA;
}
#cleared {
clear: both;
}
</style>
<div id="wrapper">
<div id="content">Column 1 (fluid)</div>
<div id="sidebar">Column 2 (fixed)</div>
<div id="cleared"></div>
</div>
Do you mean like minimum width ? you can do it like that :
#box2 {
width: 20%;
min-width: 200px;
}
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?
I have this issue I can't find a solution for it:
I have 3 divs, two of them are located inside the third.
The div which contains the others has a percentage width.
The second one which is inside the first, doesn't have a specific width and is floated to the left.
The third which is also inside the first does have a specific width and is floated to the right.
The question is how would I make the second div take as much width as possible??
Because it fits the contents as default.
<div id="a">
<div id="b">
</div>
<div id="c">
</div>
</div>
<style>
#a{
width: 80%;
}
#b{
width: ??;
float:left;
}
#c{
width: 50px;
float:right;
}
</style>
arrange your divs like this
<div id="a">
<div id="c">456</div>
<div id="b">123</div>
</div>
and remove the float from #b
#b{
background-color:#06F;
}
check the jsFiddle file
Working jsFiddle Demo
You should put your fixed element before the other one:
<div id="a">
<div id="c">
FIXED ELEMENT
</div>
<div id="b">
FLEXIBLE ELEMENT
</div>
</div>
And in CSS:
#a {
width: 80%;
background: green;
overflow: hidden;
}
#c {
width: 50px;
float: right;
background: yellow;
}
#b {
margin-right: 50px;
background: pink;
}
Floats aren't a great choice for layout purposes, since that's not really what it was designed for. If all you're looking for is to have 2 elements side-by-side and not the other aspects of float, I recommend the table* display properties instead:
http://cssdeck.com/labs/tbarj05i
#a{
width: 80%;
display: table;
}
#b{
display: table-cell;
}
#c{
width: 50px;
display: table-cell;
}
I would suggest giving #C a percentage value instead of pixels, or find out the total width and set it to that minus 50px.
Also did you try width:100%?
width: 100% for B is his container's width, hope this illustrates:
<html>
<head>
<style>
div{ border: solid 1px #ccc;}
#a{
width: 80%;
}
#b{
width: 100%;
float:left;
}
#c{
width: 50px;
float:right;
}
</style></head><body>
<div id="a">
<div id="b">DIV B
</div>
<div id="c">DIV C
</div>
</div>
</body>
</html>