I am building a responsive version of my website.
While I'm happy that most floating divs get forced down the screen, there are a few divs that I need to remain next to each other, even if the screen area is smaller than the total width of these divs. In this case, I want to scale them down, so that they fit the screen.
Essentially, here is the layout:
[___DIV 1___|___DIV 2___|___DIV 3___]
I want to make sure that when the screen area is small, they don't look like:
[___DIV 1___|
___DIV2___|
___DIV3___]
but that they look like:
[div1|div2|div3]
Each div is float:left; width:220px;
The three divs are sitting inside another container div with width:100%;
You can put all three divs in one container div and only set float: left on the container.
<div id="container" style="float: left">
<div id="div1" style="width: 33%">...</div>
<div id="div2" style="width: 33%">...</div>
<div id="div3" style="width: 33%">...</div>
</div>
<div id="div4" style="float: left">...</div>
Best way to achieve it is to assign width in percentage in that instance. It should look like :
float:left; width:33%;
It will solve your issue.
You can change width:220px; to width:33%
<div id="Main" style="float: left;width:100%;">
<div id="div1" style="float:left; width:33%;background:yellow;"></div>
<div id="div2" style="float:left; width:33%;background:blue;"></div>
<div id="div3" style="float:left; width:33%;background:grey;"></div>
</div>
Demo Link : HERE
All the other answers are based on percentage values of the width property.
I have completely another apporach here. Since you're designing a response layout you should not rely on percentage values especially when you're trying to fit 3 divs in one row. You should define key resolutions that you're aiming (e.g. smartphone, tablet - landscape/portrait) and design your layout in each of that resolution using media queries.
When using 33% method you're completely dependent on the device width. You'll never know what the exact width of a div will be so you can't predict how its content will behave.
EDIT:
Approach from your comment might look like this
div.column {
float: left;
width: 33%;
}
#media only screen and (min-width:660px) {
div.column {
width: 220px;
}
}
Change the float:left; width:220px; to something like float:left; width:40%;
It should stop them from moving lines.
change width:220px; to width:33%;. It will be more flexible. Whenever you scale your web browser, the three div will remain next to each other.
you need to set the width of those divs as a percentage, 33% that would make them scale according to their parent element
here's a jsfiddle, hope it helps!
.container{
width:100%;
}
.third{
float:left;
width:32%;
margin:0.65%;
}
http://jsfiddle.net/jcferrans/MSfmW/
Related
I have page that loads data in dynamically. I have put the image on the left and some text on the right. In two column by using float:left;
This works fine but the height of the containing div does not change to match the height of the larger div.
I have soemthing like this:
<div class="container">
<div class="left">//some php to load image</div>
<div class="right">//loaded text</div>
</div>
.container{
width:800px;
height:auto;
}
.left,.right{
float:left;
height:auto;
}
.left{
width:300px;
}
.right{
width:500px;
}
The divs are next to eachother but the containing div only resizes to the height of the smallest div. Shouldn't it resize to the height of the largest div?
Add overflow:auto to the .container element..
I think this is a typical clearfix problem.
Read here about clearfix: What is a clearfix?
I am working on image grid(4 columns) with fluid layout. In jsfiddle currently the height is set to auto but it's not coming the way I am expecting because the image dimensions are different. The image size is not proportional after fixing the height. I know, it will work properly when image(width/height) will be equal but I don't want to do this because images will be coming dynamically(same width/different height). Is there any way it can be fixed for different image dimensions? Fiddle below
img{
width:100%;
//height:150px;
height:auto;
}
JSFiddle
I took a different approach. You said that the widths will remain the same, whereas the heights will vary. As opposed to floating each individual img, I think it's better (and easier) to place the imgs within a column, and float the columns, rather.
Live demo, try resizing the browser and stuff...
HTML
<div id="image_box">
<div class="col">
<img><img><img><img><img><img>
</div>
<div class="col">
<img><img><img><img><img><img>
</div>
<div class="col">
<img><img><img><img><img><img>
</div>
<div class="col">
<img><img><img><img><img><img>
</div>
<div class="col">
<img><img><img><img><img><img>
</div>
</div>
CSS
#image_box {
width:90%;
margin:0px auto;
}
.col {
width:18%;
float:left;
margin:0px 1%;
}
img{
width:100%;
height:auto;
margin-top:6%;
}
I just threw this together relatively quickly.. if you wanted to improve the layout, you could specify a different width for .image_box, and have columns overflow under the other columns.
One option is to restrict the height of the img container. In your case, the li elements.
li {
height: 100px;
overflow: hidden;
}
You would have to provide a height that would work with the smallest possible image size.
i have tried a few changes in your css,
please find below jsfiddle
'http://jsfiddle.net/wFLJW/3/'
I have the following div structure below:
<div class="Large-Centered-Div">
<div class="Left-Div">
<div class="Inner-Left-Div">
</div>
<div class="Inner-Center-Div">
</div>
<div class="Inner-Right-Div">
</div>
</div>
<div class="Center-Div">
(Small Image/Etc. Would Go Here)
</div>
<div class="Right-Div">
<div class="Inner-Left-Div">
</div>
<div class="Inner-Center-Div">
</div>
<div class="Inner-Right-Div">
</div>
</div>
What I am looking to do is a bit complicated, but hopefully this all makes sense:
Have the "Large-Centered-Div" expand the entire width of the page and within the "Large-Centered-Div" have the "Left-Div", "Center-Div", and "Right-Div" set up so that the "Center-Div" is small and the "Left-Div" and "Right-Div" be large such that the "Center-Div" is small in width but in the middle.
Within both the "Left-Div" and "Right-Div" I would like the "Inner-Center-Div" to take up the majority of the space and only have the "Inner-Left-Div" and "Inner-Right-Div" take up enough space to show an image for their respective edges. In addition, I would like the "Inner-Center-Div" to be fluid with the width size.
With these things in mind, I have achieved the first goal on my list but not the second. Here is the code for the first item:
.Large-Centered-Div {
position:relative;
left:0px;
right:0px;
}
.Left-Div {
float:left;
vertical-align:middle;
width:47%;
}
.Center-Div {
float:left;
width:6%;
text-align:center;
}
.Right-Div {
float:left;
vertical-align:middle;
width:47%;
}
The question is, how do I achieve #2? Is this possible?
Thanks.
Try making the inner left and inner right div auto for the image and making the inter center div a certain percentage.
What I would do is hard code the width of the image. let's call it w pixels. So:
.Inner-Left-Div, .Inner-Right-Div { width: wpx; }
Then the inner center div will expand to fill the rest of the space.
What I would do is make the div's width a function of percent, that way, they will always be the same relative to each other, and they will resize perfectly.
.Large-Centered-Div{
width: 100%;
}
.Left-Div, .Right-Div, .Inner-Left-Div, .Inner-Right-Div{
width: 40%;
}
.Center-Div, .Inner-Center-Div{
width:20%;
}
This is by far the fastest and most DRY way of accomplishing this.
also, for convention's sake, it would be better to leave your class names lowercase. It's easier to remember your conventions if you simplify them, good luck!
-Brian
sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )
This is what I am trying to do :
HTML
<div class="container">
<div id="one" class="child">One</div>
<div id="two" class="child">Two</div>
<div id="three" class="child">Three</div>
<div id="four" class="child">Four</div>
</div>
CSS
<style type="text/css">
.container{
height:40px;
width:500px;
}
.class{
float:left;
/*...*/
}
</style>
The child divs should fill the container div how big or small it has its width. They can get big according to the container automatically.
|<---One----><---Two---><-Three-><--Four-->|
How can I do it with css?
Thanks in advance.
I've set up a test site to make sure this works:
First, you'll need to keep float to "left" to keep everything on the same row. Next, set width to "25%", to space out the elements. Finally, set text-align to "center" to center the elements, as in your diagram. Remember, if you change the number of elements, you'll need to modify the "25%" to a value that evenly spaces out the elements. (Use 100 / numElements).
.child {
float: left;
width: 25%;
text-align: center;
}
Does anyone know a way to do this without using width percentages, so that it will auto-spread the elements if they are removed or added?
You can set the .child width to 25%, like this:
.child { width 25%; }
You can test it out/play with it here.
Total width is 500 so each child div should be 125px wide. You got the right idea using the float:left;
The solutions that have been given to you are correct. Just be careful if you have margins/borders/paddings in the inner divs, because in that case the 25% would break the layout (margin, borders and paddings are not included in the percentage).