I have a two divs aligned side to side and they work as I want them on desktop but when it comes to mobile browser (it works on chrome mobile as the desktop one) like Mozilla Firefox, Safari one of the divs push to the bottom. I have tried setting overflow:scroll to the div container but that doesn't solve the prob. Can someone help me out?
css
.container{
margin: 10px auto 20px auto;
display:table;
overflow:scroll;
}
.left_col{
width: 700px;
border:1px solid #C0C0C0;
display: -moz-inline-stack;
display: inline-block;
background-color:#fff;
vertical-align:top;
zoom: 1;
*display: inline;
}
.right_col{
width:300px;
border:1px solid #C0C0C0;
display: -moz-inline-stack;
display: inline-block;
height:1090px;
background-color:#fff;
vertical-align:top;
zoom: 1;
*display: inline;
}
html
<div class="container">
<div class=left_col"></div>
<div class="right_col"></div>
</div>
Your viewport isn't sufficiently wide on a mobile browser to fix 1000px of content. Consider using percentage widths if you want to maintain that layout.
.left_col{
width: 70%;
float:left;
}
.right_col{
width:30%;
float:left;
}
My solution will be to move set a width on the parent if possible.
.container{
...
width:1024px;
}
.left_col{
width: 700px;
float:left;
}
.right_col{
width:300px;
float:left;
}
Related
Looking to fit 2 horizontal divs in a 100% repsonsive div. So the 2 internal divs will resize when the screen shrinks/increases.
<div class="mydownloads">
<div class="warrantybook"></div>
<div class="brochurebook"></div>
</div>
.mydownloads {
width:100%;
}
.warrantybook {
padding:10px;
float:left;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
.brochurebook {
padding:10px;
float:right;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
You want to set the full div to 100% and the 2 internal divs to 50% and remove all padding, border and margin. I would recommend setting a "min-width" in css to ensure there is always a minimum, I've seen a lot of sites look goofy without having a minimum width on certain things.
<div class="mydownloads">
<div class="warrantybook"></div>
<div class="brochurebook"></div>
</div>
.mydownloads {
width:100%;
}
.warrantybook {
padding:0;
margin:0;
border:0;
float:left;
width:50%;
background:red;
height:50px;
}
.brochurebook {
padding:0;
margin:0;
border:0;
float:right;
width:50%;
background:blue;
height:50px;
}
https://jsfiddle.net/gn6jabb9/
This can be done easily enough with floats or inline-blocks, though the clean 'new' way is with Flexbox. Assuming you don't need support for IE < 10:
.mydownloads {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start; /* Change this to 'stretch' if you also want full height */
}
.warrantybook,
.brochurebook {
flex-grow: 1;
height: 50px;
}
.warrantybook {
background:red;
}
.brochurebook {
background:blue;
}
https://jsfiddle.net/gn6jabb9/1/
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
I have a code where #page_field is parent and have two children. So, I want these two blocks go one after another. What I faced is that chrome display left_block correctly: pager_separator_design is 30px wide, so 30px + 120px (relative left) give me 150px and this is what should be done.
However IE, do not add width of pager_separator_design so total left 120 is wrong. Firefox do like Chrome.
What can I do?
HTML
<div id="page_field">
<div id="pager_separator_design">
</div>
<div id="left_block">
</div>
</div>
CSS
#page_field
{
margin-right: auto;
margin-left:0px;
width: 1000px;
background-color: #FFFFFF;
height:auto;
display: table;
}
#pager_separator_design
{
position:relative;
display: inline-block;
left: 120px;
background-image: url('separator_new.png');
width:30px;
height: 100%;
z-index:10;
}
#left_block
{
vertical-align: top;
position:relative;
left:120px;
display: inline-block;
width:850px;
margin:0;
padding:0;
}
I am using IE10.
Display inline-block has a margin issue when trying to align elements horizontally. I think it's about 6px that shouldn't be there (usually in IE).
Try adding margin: 0 0 0 -6px to your elements to see if that solves the issue.
Caveat: Not sure if I fully understood the issue, so this is a bit of a guess.
Hopefully, today, I found a solution and the problem:
I used table, table-row and table-cell. + added addtional emply cell at the left.
And problem was that I made IE show sites like IE 7. I did it many weeks ago and forget to tur n it off.
My css:
#page_field
{
margin: 0px;
padding:0px;
margin-left:0px;
width: 1000px;
background-color: #FFFFFF;
display: table;
position:relative;
}
#middle
{
display:table-row;
}
#left_block
{
width:120px;
display: table-cell;
margin:0;
padding:0;
}
#pager_separator_design
{
position:relative;
display: table-cell;
background-image: url('separator_new.png');
background-repeat:repeat-y;
width:30px;
height: 100%;
z-index:10;
margin:0;
padding:0;
}
#right_block
{
vertical-align: top;
position:relative;
display: table-cell;
width:850px;
margin:0;
padding:0;
}
And code is:
<div id="page_field">
<div class="middle">
<div id="left_block">
</div>
<div id="pager_separator_design">
</div>
<div id="right_block">
</div>
</div>
</div>
I hope it will help somebody.
Aim : I want to make my divs floating next to one another like this.
http://jsfiddle.net/x8Abc/1/
.post {
float:left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
Problem : when I have a content which of of more length in an in between div, then it is pushing the div below it to side like this.
http://jsfiddle.net/W3afJ/
.post {
float:left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
How can I achieve a uniform well packed layout like jsfiddle.net/x8Abc/1/ ?
You need to use display: inline-block in this situation.
Amend your css like so:
.post {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
padding: 10px;
margin: 5px;
border: 1px solid #000;
width: 25%;
zoom: 1;
}
Here's a fiddle as well
To align the blocks vertically change the vertical-align css property, e.g.
.post {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
padding: 10px;
margin: 5px;
border: 1px solid #000;
width: 25%;
zoom: 1;
vertical-align: top;
}
For more information on making display: inline-block work in IE (as I have done above) see here:
https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
You have a few different options:
Give each of your posts a fixed height, and set the overflow property to auto. This will (obviously) ensure that each is the same height and so avoid the issue where one floats next to its sibling, but will add scrollbars to divs with a lot of text, and blank space to the bottom of those with little (see it here):
.post {
float: left;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
height: 250px;
overflow: auto;
}
Stick with float to lay out your posts, and ensure that the first post in each row is cleared (see it in action) . That can be achieved like this*:
.post:nth-child(3n + 1) { clear:both; }
Change your approach to laying out your posts to use inline-block, like this:
.post {
display: inline-block;
padding:10px;
margin:5px;
border:1px solid #000;
width:25%;
}
There is a fork of your original example here. I would recommend going with this approach, as it gives you the ability to vertically-align your posts as you see fit, and won't restrict the amount of copy in each like option 1. This article is a good read, and details how to get it working even in older browsers.
* Note that IE<9 won't support the nth-child pseudo-class, so you'd need a JavaScript fallback for those browsers.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Image center align vertically and horizontally
I'm uploading images to a php file so I can resize them to a certain width or height, which ever is smaller. The image resizer I'm using is a class from phpclasses.org and it seems to be working pretty good. The problem is, not all images are the same size. Some are wide and narrow while some are almost square. So this is causing all the images to position on the top of my div and not the middle. My thought is to have CSS perfectly center the images so the different sizes look decent when viewed, but I can get them to center horizontally but not vertically. Here's a screenshot of what I"m trying to center:
As you can see the guns are aligned on top of the div? I can't use a hard coded figure to push it center since other images will have different heights. I need some way of determining the size of the image and figuring it from there.
Here's the code for the div's that the images are in:
#product {
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
}
#product-image {
margin:2px auto;
width:194px;
height:145px;
border:1px solid #999;
text-align:center;
}
Thanks for having a look.
#product
{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
#product img
{
vertical-align: middle;
max-height: 200px;
max-width: 200px;
}
Max-Height / Max-Width is used to handle images that may be too large.
For dynamic vertical alignment where you cant use position absolute i suggest using javascript for an absolute fix across all situations but you can use several techniques seen in the following Guide for vertical alignment
$(document).ready(function(){
var image = $('#product-image');
var container = $(image).parent();
var margin = (container.height() - image.height()) / 2;
image.css('margin-top', margin);
});
with the following CSS
#product
{
float:left;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
text-align:center;
}
#product-image
{
margin:2px auto;
width:194px;
height:145px;
border:1px solid #999;
}
<div id="product">
<div id="product-Inner">
<img id="product-image" src="imageURL" />
<div>
<div>
style css
#product {
float:left;
display: table;
box-sizing: border-box;
margin:5px;
width:200px;
height:200px;
border:1px solid #999;
text-align:center;
}
#product-Inner {
display: table-cell;
vertical-align: middle;
text-align:center;
}
#product-image {
box-sizing: border-box;
max-height: 100%;
max-width: 100%;
border:1px solid #999;
}
you can easily get your desired results through display:table-cell & vertical-align:middle;
CSS
#parent {
width:200px;
height:200px;
display:table;
background-color: black;
float:left;
margin:5px;
}
#parent-image {
display:table-cell;
vertical-align:middle;
text-align:center;
}
DEMO