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/'
Related
Please see this pen in Chrome: codepen example
html:
<div class='flexbox'>
<div class='static'>ddd
</div>
<div class='flex'>
<div class='flex-child'>
<div class='container'>
*** very long text here *** ...</div>
</div>
<div class='flex-child'>hhh
</div>
<div class='flex-child'>hhh
</div>
</div>
<div class='static'>ddd
</div>
</div>
css:
html,body{
margin:0;
padding:0;
overflow:hidden;
}
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
display:flex;
position : relative;
}
.flex-child{
background:red;
width:100%;
display:block;
color:white;
position : relative;
}
.static{
background:transparent;
width:100%;
color:yellow;
}
.container{
position : relative;
background:magenta;
height:100%;
}
I believe the example is almost selfexplanatory.
The question is: How to do it, to have the .container div ready to host any kind of content, unknown at the moment, and not to overlap over the footer.
try to remove background colors. the text from .container is visually mixed with the text of the .static footer. How to arrange it and have the .content div and its text not to overlap the footer?
edit:
The footer should be at the bottom of the viewport.
No explicit sizes or dimensions are allowed to be set in css.
Please take my question as an example, an experiment.
My concern is not to use any explicit sizes or dimensions e.g. header height 50px, I want to have the layout as general as possible. so if I formulated my question in other words:
pls in my original codepen delete all the text from the .container and then check the .container height via developer tools. It will be 0, but I would expect it to be the same height as it's parent .flex-child is.
I know that it probably would not be following the specification, but how to achieve this?
edit 2:
I described my problem in more detail in another question, with codepen and picture. Thank you for your ideas. https://stackoverflow.com/questions/32114925/header-flexible-body-with-nested-flexible-columns-footer-concrete-layout
thank you
Your actual requirements are a little unclear as to the actual position of the footer.
Option 1.
The footer should be at the bottom of the viewport and so the whole page must be contained within the viewport.
In this case the content of the main element can be any size and a scrollbar is added when content will overflow the height of the element.
Codepen Demo
Option 2.
The footer should be at the bottom of the page/document and the page can be any height (presumably with a minimum of the viewport height).
In this case the content of the main element can be any size and the page/dicument will increase in size to accomodate it
Codepen Demo
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 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/
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
I need to make an element that takes up a given amount of space (width) such that I can line up several of them together to make a horizontal bar. I can get it to work with absolute position, but I have to manually control 'left' to get the bar segments (rectangles) lined correctly, which is becoming somewhat troublesome. Is there an alternative?
You can do something like this where .rect divs are your boxes:
<style>
#container{
float:left;
position:relative;
}
.rect{
float:left;
height: 50px; /* or whatever you want */
position:relative;
width: 50px; /* or whatever you want */
</style>
<div id="container">
<div class="rect"> </div>
<div class="rect"> </div>
<div class="rect"> </div>
<div class="rect"> </div>
</div>
This would make a horizontal row of .rect boxes corresponding to the width/other css properties of your container.
You can simply float them.
Assuming a vertical stack you can float all inner elements right, give them a clear: left; and put them in an outer element that has a fixed width equal to the largest element.
Assuming a horizontal row, just floating them should be enough.