This is my first post, so please be gentle. I've searched thoroughly for an answer but had no luck - I'm sure it must be something simple but I'm running out of ideas...anyway:
I'm making a responsive site but there's an image that I want to keep at a fixed size. It took me ages to work out how to do this (by removing "max-width: 100%"), however this has had the bizarre effect of changing its alignment so it is no longer centred on the page.
How can I have both? Centred and a fixed size?
Any help much appreciated.
Oh and this is what my image css is looking like at the moment:
img {
height: auto;
min-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
Thanks for all your help so far - although this is still far from resolved I'm afraid. Figured I'd show my code in full as some of you have suggested, so I put it into jsfiddle. However it works absolutely fine there - the window can be resized with the image still retaining it's full dimensions and still remaining in the centre of the page. Yet with exactly the same code, when I load the 'index' page from my PC into Chrome, the image at the bottom either retains its size but drifts to the right when the window is shrunk, or it stays in the centre but shrinks to a ridiculous size. Any idea why there might be such a discrepancy?
Here's my jsfiddle anyway, which might have some clues:
http://jsfiddle.net/eggwhite/0yz6ndjh/
Thanks again.
If I understand you right, you want to add an image which should still be centered even if the parent element's width is smaller than the image. This could be done by using an image wrapper div which is pretty wide and position it accordingly. Also, the image itself should be centered in that wrapper.
In the following example, the layout has two columns, each with an image of 300x300px. If you resize the viewport (use the "Full page" view mode), the images will still be centered (see how the "x" in the placeholder images stays visible).
html, body, .column {
padding: 0;
margin: 0;
}
.column {
display: block;
float: left;
width: 50vw;
height: 100vh;
background-color: #ccf;
overflow: hidden;
}
.column + .column {
background-color: #ffc;
float: right;
}
.img-wrapper {
width: 10000px;
margin-left: calc(-5000px + 50%);
text-align: center;
}
.img-wrapper img {
margin: 0 auto;
}
<div class="column">
Column 1
<div class="img-wrapper">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="column">
Column 2
<div class="img-wrapper">
<img src="http://placehold.it/300x300" />
</div>
</div>
Can be done by wrapping the image in a <div> like so:
HTML:
<div>
<img src="..." alt="random blue sky image" />
</div>
CSS:
div {
width: 100%;
text-align: center;
}
img {
width: 250px; /* or whatever width you need the image to be */
}
Here's a demo of the code.
If that didn't help, we'll ask that you present us with the problematic code. Jsfiddle.net is an easy way to do that.
I have two minor issues that are driving me nuts.
1) If you visit my site, Stork,you can see that the 3 steps showing how it works and the 3 questions at the footer are aligned to the left. I want them to be centered on the page but I must have missed something because margin: auto; isnt working.
Can you please help me center them?
Here is the HTML & CSS for the Steps:
<div class="panel">
<div class="title">Step 1: Schedule</div>
<div class="steps">
<p>Schedule a pick up and dropoff with our easy form and let us take care of the rest.</p>
</div>
</div>
.panel {
display: inline-table;
margin: 0 auto;
padding: 50px;
width:200px;
height: 180px;
line-height: 1.5;
}
And for the questions:
<div class="cbox">
<div class="ctitle">How Can I Pay?</div>
<div class="cblurb">
<p>Full payments can be made upon delivery using credit cards only.</p>
</div>
</div>
.cbox {
display: inline-table;
margin: 50px auto;
padding: 50px;
width:200px;
height: 100px;
line-height: 1.5;
color: #424242;
margin-top:60px;
}
2) On a minor note, I am trying to connect the words in the navbar with their respected div classes using the format href="/.contact", but i keep getting an error. how do i fix that?
Thank you!
Add text-align: center; to the panel's parent div, that should center your "inline" elements.
If you don't want the contents of the panel to be aligned that way (they will inherit the alignment), add text-align: left to the panel's styling.
Update
Regarding the second part of your question - you cannot link to an element just using its class (not without javascript, and deciding which element from the collection returned is the one you want as classes are not unique).
An id, however, is unique and can be linked to with Link
Good evening,
I was wondering what the best way to go around getting this picture to be a reality on my website with CSS. The easiest way I can think to do it is using a table but as we all know, tables are evil.
I know about floating left and right and such, but I can only really think of that managing two, maybe three columns and I'd like an indefinite amount. I've also seen ways of positioning absolutely from the left and right edge and such like, but I'd like them to be able to stretch, grow and move depending on the size of the web page.
Thanks,
Harry
<div style="float: left; padding: 10px; border-style: dotted;">div1</div>
<div style="float: left; padding: 10px; border-style: dotted;">div2</div>
<div style="float: left; padding: 10px; border-style: dotted;">div3</div>
<div style="float: left; padding: 10px; border-style: dotted;">div4</div>
<div style="clear: both;"></div>
EDIT: if you wanna do it with flot right instead you must swap the order of the div's namings div4 div3 div2 div1
If you had a look at this forum http://python-forum.org/pythonforum/, you could notice that borders which Topics and Posts divs have are short. I am writting a forum and now have a problem with blocks which must go side by side (just like those four at the above mentioned forum). Could you please help me arrange four blocks side by side so that my forum wouldn't have that sort of shortness.
You should use tables.
There are only a few cases in which the use of a table is allowed (if you go by the semantic html rules), and this is one. The overview of forums, amount of posts and views, last poster, etc is a set of tabular data. It's safe and perfectly acceptable to use tables.
The <dl> element however was not intended to be used in this way.
This is the CSS style of the <dd> element that you are requesting:
UL.topiclist DD
{
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 4px;
BORDER-LEFT: #ffffff 1px solid;
PADDING-TOP: 4px
}
The important one to get it side by side is FLOAT: left;.
The short vertical line, is just the border-left.
If you want two divs to be side-by-side, you could try using inline-block:
<style>
#div1, #div2 {
display: inline-block;
}
</style>
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
</div>
I was wondering if there were any simple examples that did the following
* A right and a left fixed column with a fluid center.
With full height and width and a header and footer.
* A single left fixed column with a fluid content column 2.
With full height and width and a header and footer.
* A single right fixed column with a fluid content column.
With Full height and width and a header and footer.
I've tried some methods (such as the ones listed on listapart) but they seemed really complicated and they used a lot of divs, or they just didn't support padding.
Thanks in advance
Check this site out:
http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm
Other layout examples from the above:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http://matthewjamestaylor.com/blog/perfect-3-column.htm
The examples you found in alistapart.com are as complicated as they need to be, and every serious example that you can find about those layouts supports padding. You will find (and already found) a lot of good examples about it in the internet, just spend some time trying to understand them and you will see that they are not so complicated, in the end.
Anyway, I have a good demo layout similar to the second you are looking for, here:
http://www.meiaweb.com/test/BMS_DM_NI/
Basically, the html is this:
<body>
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<div id="navigation">
<!-- navigation content -->
</div>
<div id="content">
<h2>Content Title</h2>
<p>
<!-- main content here -->
</p>
</div>
</div>
</body>
And the css is:
html {
overflow: auto;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
line-height: 1.5em;
}
#head {
height: 20px;
background-color: #666;
color: #AAA;
padding: 20px 20px;
}
#navigation {
width: 210px;
padding: 20px 20px;
background: #efefef;
border: none;
border-right: solid 1px #AAA;
float: left;
overflow: auto;
}
#content {
margin-left: 250px;
padding: 20px 20px;
}
I think it's simple enough, and it works in all modern browsers.
I know that it's badwrong to do, and I'm a semantic coder through-and-through (that wasn't meant to rhyme), but I still use a single layout table to do columns.
Why? It's interoperable and simple. It doesn't require ridiculous CSS hacks that just barely hold things together (seriously, floats are meant for typography, not layout). It displays identically in every browser in current use. It. Just. Works. It's a semantic hack, but sometimes you just gotta do what you gotta do.
However, there is light on the horizon. The table-* display values for CSS make equal-height columns trivial, though they can still violate source order (you still need your left-most column to be before your center column, even if it's a nav section and should come near the end of your page code). IE8, and all non-IE browsers, support these already.
CSS3 Grids and CSS3 Template Layout will both solve this issue properly, but they're still quite a bit away from being usable. A coder can dream, though, right?
You can also look at Layout Gala - 40 examples of different two and three percent and fizxed-sized column layouts.
I have reworked my sample template so you can see all three of your requested formats in action.
This is a CSS solution, no tables involved. I have set this up so the side columns are fixed width the header/footer are fixed height. Everything else is fluid.
With all modern browsers, excepting for IE7, the content is centered both vertically and horizontally. IE7 has issues with its box model. I believe IE8 have these resolved.
The center box does center vertically in IE7 because I nested a 1 cell table in the center div as a hack around IE7 box model problems. I know this is dumb and ugly but it was just to show it worked.
See it in action - Three Column Full Screen Layout
I am a bit surprised this answer did not garner a single vote or capture the bounty. It works, its simple, and it fulfills everything the OP asked for. Oh well.
The CSS
DIV { text-align: center }
#h0, #f0 { float: left; clear: both }
#h1, #f1 { height: 100px; float: none; width: 800px }
#l0 { float: left; clear: left; }
#c0, #r0 { float: left; clear: none }
#l1, #r1 { width: 150px }
#c1 { width: 500px }
#l1, #r1, #c1 { height: 350px }
#h0, #f0 { background-color: orange }
#l0 { background-color: red }
#r0 { background-color: blue }
#c0 { background-color: yellow }
#h1, #f1, #l1, #r1, #c1
{ display: table-cell; vertical-align: middle; }
The HTML
<div id="h0"><div id="h1">
header
</div></div>
<div id="l0"><div id="l1">
left column
</div></div>
<div id="c0"><div id="c1">
<img alt="dilbert (3K)" src="../gif/dilbert.gif" height="82" width="80" />
</div></div>
<div id="r0"><div id="r1">
right column
</div></div>
<div id="f0"><div id="f1">
footer
</div></div>
http://www.alistapart.com/articles/holygrail
That should be exactly what you need.
Take a look at Yahoo's YUI: Grids builder.
I found the Liquid two column layout at Floatutorial extremely helpful when setting up a full height two column layout - fixed left column with a stretchy right column, with a header and foot row to boot. In their example, they suggest the left column is used as navigation, but it could be anything.
With Floatutorial, not only do you get a sample HTML structure and CSS out of it, but when you're done, you understand why you have what you end up with.
I briefly tried the YUI: Grids builder as suggestd by #JohannesH, and had some small problems with it, but the worst problem is that it was so convoluted that I had no idea why it wasn't working, or why it was supposed to have done.
Edit: there's also a tutorial for a liquid three column layout (which I've not used), and a whole bunch of other tutorials that use floats.
In response to a message from the original poster, here's how I would do the first request with a <table> (the others are trivial modifications):
<style>
body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
border-collapse: collapse;
}
#top, #left, #center, #right, #bottom {
border: 1px solid black;
text-align: center;
vertical-align: center;
}
#left, #right {
width: 200px;
}
#top, #bottom {
height: 200px;
}
</style>
<table id="container">
<tr>
<td colspan=3 id="top">header</td>
</tr>
<tr>
<td id="left">left</td>
<td id="center">center</td>
<td id="right">right</td>
</tr>
<tr>
<td colspan=3 id="bottom">footer</td>
</tr>
</table>
There is a pre-fabbed css grid system that is based on the Golden Rule, and implements all types of column formats quite readily. Check out 960 Grid System. You can accomplish your goals without the use of tables. The nice thing that by using a pure CSS solution you can alter your layout more rapidly.
There is also a jQuery fluid implementation that has a fluid layout that you may be interested in.
This should have all you need:
http://maxdesign.com.au/presentation/page_layouts/
And a more general solution to all your CSS problems:
http://www.blueprintcss.org/
you should check out Elastic CSS Framework:
http://elasticss.com/two-columns-based-layout/
Cheers.