I have two css columns for my website they fit inside a main container, with a width of 75% that is centered. I want the right container to be at least 300px wide but to expand if there is room in the browser (my advertisement is 300px wide) and the left one to fill the rest of the space plus some space between them. This is the CSS I have so far,
#body_container{
margin: 200px auto 0 auto;
width:75%;
}
#left_container{
float: left;
width: 63%;
padding:5px;
margin-right:15px;
}
#right_container{
float:left;
width: 32%;
padding:5px;
margin-right:15px;
}
It is kind of working, but on smaller browsers (mine is quite wide so I just noticed this when viewing it on a smaller monitor) the right column is pushed down below the left one :/ anyone have any ideas? thanks in advance. also if you need to see more source code it is at http://sunnahspace.com but here is a forewarning, it is not viewable in IE at all.
It's expected behavior - you're using fixed-size margins and paddings, which means that at a certain point, the total 50px of padding and margin from your two columns will be greater than the 5% of width that your columns don't take up, and will bump into each other. Unfortunately, there's not much that can be done besides specifying a min-width, or using CSS media queries.
Related
I'm trying to create a table that has a width of 100% of the parent container, and the td's each are sized automatically on screen size, which is all working fine.
Only the max-width property is ignored on the td. It is scaling to more than 150px. The min-width is working fine.
What am I doing wrong?
I have the following css:
table {
table-layout: fixed;
width: 100%;
}
td {
min-width: 60px;
max-width: 150px;
height: 40px;
}
Edit:
Working example: https://jsfiddle.net/7ez2hmy6/1/
We need an example to answer the right way :)
My guess : if the cell content is larger than 100px (whith a white-space: nowrap, for example), the navigator will still keep the width of the content.
Perhaps adding a overflow-x: scroll would resolve, but it would add a scrollbar when the length will be greater
https://developer.mozilla.org/fr/docs/Web/CSS/overflow-x
EDIT
With your example, I see one drawback: you ask the table to take 100% of width, but you have cells that should only take some width in it. So, the navigator has to take a choice between: must I take 100%, or just the sum of cells max-width?
The best I can do is to fix the width of the cells, and let a last one take the remaining space. Like this: https://jsfiddle.net/1rz8bksp/
each cell would take between 75 and 150px, as asked,
the remaining one will take... the remaining space.
Not very satisfying, but I don't see how to do elsewhere...
I have different size images in my list items That are causing tiles to be pushed below in an odd way. What is the best way to have different size images (taller ones) fit in the container and have the container the same size and fluidly respond down? I have used a vw as the height on the image which sets the tiles to be the same size, but causes the images themselves to squish, but is this the best way? uncomment the vw in the example to see.
Code Pen: http://codepen.io/anon/pen/NNOWOZ
CSS:
ul{
overflow:hidden;
width:50%;
}
li{
list-style:none;
float:left;
margin:2% 1%;
border:1px solid black;
width:22%;
}
li img{
width:100%;
/*height:10vw;*/
}
As you have noticed, float:left may not provide provide desirable results when the elements are different heights. In your example, they are all the same width, but various heights.
Since all your elements are percentage width, you know that no matter what the container size, there will only be 4 elements that fit on each row, so the following css solves your problem in this example
li:nth-child(4n+1) { clear: left; }
Other options which work better when the number of elements per row varies
Replacing float:left with display:inline-block will give you more of a clean wrap effect, but the images will then be bottom-aligned instead of top-aligned as they are now.
Fit them into squares, making your lis to have the same width and height, and then place images inside with max-width: 100%; max-height: 100%. This will force a certain height thereby solving the float problem.
You may prefer to use background-image, with background-size: cover if you would like the images cropped into a square as many smartphone gallery apps would do. This doesn't work well for all use cases. Also background images won't print by default.
If you go this route, you can center the image vertically as well.
Use JavaScript which gives you unlimited flexibility but requires more work.
Let's say I want to create an HTML page with one main div that holds all the content.
The div should hold other divs and be fixed in the center of the page like in the image.
How should I specify the width? In a % value or a value in px? What is the best practise?
And what should be the correct value?
Please sorry if this has been covered before....
Image is here:
EDIT
So much nice answers... Thank you all very much
It all depends on the content you will be presenting and what you want to do with it. You may choose to use a fixed width layout if there is no need for the content to expand, or if you want to keep the text/design constrained within the width of the DIV. Though, one thing you may want to consider is using a combination of percentage and fixed width. For example, you may choose for your DIV to be 95% of the page as long as the minimum width is not below 700px and the maximum width is not over 950px. The result of this is a DIV that will expand and contract within your specified constrains.
div#container {
width:95%;
max-width: 950px;
min-width: 700px;
margin: 0 auto 0 auto;
}
In my opinion you should use px
Cause the % will depend on the wide-screen of the user, so images could display bad
I can't see your image but you can do that with two divs using percentages.
HTML:
<div id="outer">
<div id="inner">Your centered div</div>
</div>
CSS:
#outer {
width: 100%;
}
#inner {
width: 50%; // whatever width you want - I can't see your image
margin: 0 auto;
}
To center the div simply put left and right margins to auto on css.
Regarding the % or px, it would REALLY depend on the layout you are willing to code. If your layout was made thinking in a fluid layout, then you should use % but add a max-width so it would not stretch past n px.
For example:
You layout was made for a 1024px screen using 960px grid. But it would be cool to let it stretch a bit for 1280px screen users. So you put width:100%; and after ir, max-width:1280px.
So any user with bigger screen will see the layout for a 1280px.
I will suggest to use body margin:0 and use container div with margin auto, and use pixel for content width and height.
<div class="container">
<!-- HTML Content here -->
</div>
.container{
margin-right: auto;
margin-left: auto;
}
Css float left and right control the flow of the div. if you want to place two divs, right and left, then use
.left-div {
float: left;
width:200px // use pixel to control width
margin-left: 5px;
}
.right-div {
float: right;
width:200px;
margin-right: 5px;
}
First: Holding that main div in center position can be done with margin-left: auto; margin-right: auto;.
Second:
I don't think, that there is a basic best practice, because the usability of variable with depends highly on the content itself.
One usable solution that covers both could be using fixed width depending on the device (desktop, table, phone) using media queries.
I wrote two years ago a design: the goal was to fit in a 1024px screen, but have a bit of extra graphical content so that it doesn't appear to be too small on larger screens. The result is http://megaglest.org/, the website of an open source project.
Here's the HTML: I don't want to use an img tag since it will enable me to work on a responsive design where such images won't be loaded:
<div id='all'>
<div id="header">
<div id="header_left"></div>
</div>
</div>
Here's the corresponding CSS:
#all {
width: 1016px;
margin: 0 auto;
}
#header {
height: 313px;
background-color: #4dd;
}
#header_left {
float: left;
width: 140px;
margin-left: -140px;
height: 379px;
/* works fine */
/* background: #dd4; */
/* there's a one pixel offet */
background:
url("http://megaglest.org/uploads/megaglest2011/header/left.jpg")
no-repeat;
}
Only on Google Chrome (22.0.1229.94 on Linux), and only at certain window sizes (when only part of #header_left is visible), I get an offset one pixel between the image and the blue header. It's possible to see using this jsFiddle when the "result pane" is very wide: http://jsfiddle.net/hTbJA/
Here's a screenshot of the issue. What's weird is that the Google Chrome developer tools say in "metrics" that the div is 140px wide, but then when I use the "Elements" pane and hover #header_left, it says 141px! Could it be a browser bug?
Thanks.
The issue is being caused by the fact that you have your #header_left object and your #header_right object pushing out past the edges of the center line with negative margin - but the center piece having a horizontal margin set to auto.
What's happening is that when the body is an even number of pixels wide - auto makes the #header, which is 1016px wide, center with an even number of pixels on either side, due to the margin: 0 auto; (example: if body is 1200px wide, there are 184px available, so the browser allocates 92px on the left, and 92px on the right. Your #header_left, then, gets a margin-left: -140px; rule - which puts it 140px to the left of the left-edge of the #header, and it lines up pixel-perfect.
When the body is an odd number of pixels wide, however, say 1199px - and the margin: 0 auto; kicks in, a partial pixel is allocated (in this case yielding only 91.5px per side). Because an object can't be drawn in half a pixel - the browser rounds up for the actual location at which to start rendering #header - and the left-edge is calculated at 91.5px. When your margin then goes -140px on the #header_left element, you wind up on another odd pixel - but this time, the calculation rounds down. (The internal math is probably calculated by first rounding - then subtracting).
This gives you the appearance of 1 pixel off...
The fix - in your scenario - is to change your #header_left's margin-left CSS rule to -139px instead of 140px - and allow a slight overlap. I've tested it with your actual site - and it looks fine and blends nicely.
So - in answer to your question - no - this is not a bug, per-se - it just means that the developer tools and the elements pane calculate differently. One of them rounds up and one rounds down when dealing with partial pixels. Or perhaps one is measuring what is actually rendered effectively on the screen, and the other measures what the CSS rules are indicating.
I have the following html:
<div id="thumbs">
...8 image tags width and height of images 100 x 100px
</div>
The related CSS is:
#thumbs
{
overflow:hidden;
float:left;
position:relative;
background-color:white;
height:100px;
width:100%;
}
#thumbs img
{
padding:5px;
}
When I turn my resolution down to the lowest setting -800 x 600, the last image -img8 jumps over to the next line. I would like all the images to show in one line. Is this possible?
You have 8 images equaling 100px wide each. The width of the window is 800px. You also have 5px padding on each image which then makes the whole structure 880px wide. Reduce each image size to 90px and you should be good. Also take into account the scrollbar if there will be scrolling that is another 20-30px.
have you tried setting a min-width on the container
#thumbs {min-width: 880px;}
width derived from 8 x 100px wide images with 10px padding (5px left + 5px right) each.
Have a look at responsive web design techniques that may help.
The problem you have is you're trying to put 880px into a space of 800px, this is 800px for the images then padding of 10px for each image you have in the div giving the additional 80.
The basic solution I would use is to put in a media query like
#media screen and (max-width: 810px) {
#thumbs img {
padding: 3;
height:80px;
width:80px
}
}
What this saying is if the width of the window is under 810px then apply this styling to the elements. Why 810px? To be safe basically.
To keep the consistency of the design we do need to reduce the image sizes and the padding, you will need to play with these variables depending on how they actually look on the screen.