I'm working on a newsletter design (which means no use of the CSS background-image property), and I need to use a stretched asset on the left and right side of a table.
So I have this table with 3 cells : one on the left and one on the right for my image that needs to take the whole height of the table, and one on the center with some text.
Issue is that the isn't taking the entire height of the cell in IE (and Outlook). I've added a red background color to the cell to make sure it's taking the whole height available.
My code is a bit too big to be shown here, but you can see it live here
And here is a JSFiddle : http://jsfiddle.net/jXtNE/
Set the padding, margin to 0px; If it not works, just give the negative values to move the margin to the end of the page. For eg -10px. May be this is not a perfect solution. But it temporarily solve your problem.
Related
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
I have no control over the html in this project, so I need a css only solution unfortunately. The html is horrible, and it this wouldn't even be a problem if I could edit it. I have made a fiddle of where I am at at the moment.
I have a fixed width div, with a fixed width table inside it. They are the same width (500px in example) The table has an unset number of rows, generated in asp. I have floated the rows left so they appear in line (I know this is awful, but it was all I could do without editing the html) Each td is 100px. The heights and background colours added in the css are just to make it a bit clearer, they can be changed to whatever.
What I want to achieve is to get the td to start at the right hand side instead of the left. I have tried floating right instead of left, but this makes the links appear in reverse order which is undesirable.
The only solution I can come up with is to change the table width in css and float it to the right, which would be fine if the number of rows was a constant, but there could be some added to it or removed, which would leave it looking incorrect again.
fiddle link
I think you were correct with your thought to change the table width in css and float it to the right. I think I get what you want if I set the table width to 0px (it will expand to contain the tr's) in CSS, and float the table to the right.
Edit: nevermind. I was using Chrome and it worked there, but not in IE
Edit2: width:auto seems to make it work in IE, Chrome, and Firefox
I you have fixed width tds in your table, they should add up to 500px. In this case they add up to 400px. So you have to prepend one tr with auto width to your table.
Update: Hmm, this does not work since you have floating trs instead of tds
I know this is a common question and I've already tried the searched methods. Here is the jsfiddle: http://jsfiddle.net/ZfZK9/ and here's my problem
Basically, I've got a main div container. It has an image and some text. I need the image on one side, then the text on the other. I tried putting the img in a div, setting it's height to 100%, and floating it right, but as you can see in the jsfiddle once the text goes below the image it doesn't keep the column formation.
I'm not sure why the display: block and height: 100% aren't doing any good on the left column.
Thanks
Edit: I'm assuming height: 100% doesn't work because that gets rendered and then text gets added later. I'm still trying to find an elegant solution though, and general-purpose.
Another problem, is when I set both divs (of the image and of the text) to float: left, it just displays the image then the text under it
It can be done like this: http://jsfiddle.net/ZfZK9/34/
Just create two div's as columns around both sides, then set both those sides to a specific width, then play around with the padding and margin til you get what you want.
To keep your border around your content, I added a clearfix which will help contain the two floated columns....
http://jsfiddle.net/ZfZK9/34/
Had to edit a few things, took a bit to get it right, but now all should be working. Contains two floated divs, with a browser proof clearfix added to the mix. If you wanted the image, or the sidebar to appear as if it continues to the bottom, read about Faux Columns
You have some css in the html and some in the css so this is hard to follow. What I believe I see is a common mistake where you must consider when you set something to 100% you have to think, 100% of what? It's always the parent of that element. So what is the parent set to? If nothing, there's your problem.
Just remember that if the parent is also set to 100%, the same question will apply.
EDIT: I see the problem now. I misunderstood. What you want to do then is set the width of the right div, the one with the text. Float that right and it should solve the problem.
I have a reasonably complex layout problem:
I would like to have a main box that has 95% width and that has side margins all around (140px 2.5% 20px 2.5%).
Within that box I would like to have two columns:
The first should (left hand) should have a transparent background and will be mainly for links but also some other arbitrary block content (like poll results etc.). The menu in this bar is an unordered list and I would like it to highlight in such a way as to appear to join with the content when active (which means that the 2nd column must be at least as high as the menu is; thus equal height columns are an issue although, I don't mind using min-height and assuming that the menu will never be longer than, say, 400px). This column should be 180px (unless a percentage is absolutely vital; then just assume 30%)
The second column is the content column and should be padded in slightly from the main content holder but not from the left hand column (so that the links appear to join the content). I would like have rounded corners on this column which means that the standard faux column technique will not work because the rounding does not apply to it. (this column should take the rest of the available space inside the main div that is 95% wide)
I also like the idea of using rounded corners on the left hand side of the highlighting of the active menu item.
All this is going to have an absolutely positioned header above and if possible, I would prefer to use jquery's "corner" plugin to create rounded corners rather than images but I'm at a stage where it doesn't matter immensely.
The problem is that I've done each thing individually but not all together. IE generally mucks it up somehow. For example, the closest that I've come to doing it correctly, IE decided that although my menu bar was floated to the left, it shouldn't actually write any content horizontally in line with the menu and so although the box was there (I could see the background) the content was halfway down the page...
Sorry that this is so long and without code but it seems silly to give a pile of code to what seems like should be a trivial problem...
Here's what I managed to get working in standards compliant browsers:
alt text http://www.inselpix.com/img/24036931603.jpg
(I've never used this image host before, I hope it works...)
Check out the float tutorial.
This 2 column layout caters for IE deficiencies.
IE has problems with the float model (although apparently there's improvement in IE 8). You could try using just absolute positioning... even though that's probably not the ideal solution.
Thanks all, Katesmeow probably helped the most:
Turns out what I needed to do was absolutely position the main div and the left (menu) div (which I gave a minimum height) and then relatively position the content div. I made the left menu 18% wide with a 1% left margin and the content div I made 80% wide with a 1% right margin. I also had to add bottom padding to the main div according to the top offset that I gave to the content div (so I used "top: 30px" to give the main div padding from my content div and then used "padding-bottom: 60px" to compensate 30px for the top - because otherwise the div extends too far - and then add a further 30px of padding).
The problem is that IE still mucks it up; so while my main div is 95% wide, IE doesn't do the relative widths properly and my main content pane is too wide. So, I used conditional comments and set the content div to be 76% wide (95% x 80% = 76%) and it's working reasonably well. The rounded corners are doing something slightly odd in IE but it's fine... The biggest problem now is that I don't have a bottom margin on the main div but I can live with that if I can't figure it out.