And equal heights columns are NOT a mandatory request.
If is less painful to use min-height or even height, it’s ok.
A)Should we absolute position the text on a container with ALL three columns as a single image as background?
B)Should we place three divs and, on each have the rounded shape as a background?
C)Should we have three container column divs and, inside each, two more divs? One for the rounded stuff, and the other for the column?
D)Should we absolute position the rounded shape, to the yellow column, and give it a negative top value?
Any other E) perhaps?
Please advice. I’ve tried a lot already, but I’m really far from a great result, and the only thing I get its hack after hack…
If anyone could be kind enough to spare a few moments dealing with this, I would love to.
<div id="container1">
<div class="main-column">
<h2>Hello tittle 1</h2>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div>
</div>
<div class="main-column">
<h2>Hello tittle 2</h2>
<div class="text-column">
<p>I'm on column 2 and I like it</p>
<p>I'm on column 2 as well</p>
</div>
</div>
<div class="main-column">
<h2>Hello tittle 3</h2>
<div class="text-column">
<p>I'm on column 3 and I like it</p>
<p>I'm on column 3 as well</p>
</div>
</div>
</div>
I ran some quick checks and cannot make the image NOT show up in IE8. The column gets funky in Quirks mode, but the image is still there. I don’t see the problem.
Just now I saw your post. I’m still unable to see the image, and I have changed the strategy on my last code.
The issue about this last one, is that, well… you have to absolute position all the text, and it’s not at all flexible… (but neither was the other any anyway…).
Not sure what path to take, none seems good to me to be honest.
I will take a second look on the first approach. It seems better then the second… but if anyone could look at the layout on the first post, and tell me that I REALLY should take another approach, please spare me a few more hours…
@rontap - The fiddle works and I can see it on fiddle. But, the problem lies on IE7 and IE8. And that I can’t see with fiddle, so I copy paste the code above, and uploaded and the result was the one on the image.
Anything related to hidden images.
I did had some containers with overflow: hidden; I have them no more.
Please note that you scroll down, until you find the portion with the red background.
Before that I have another try, it almost work cross browser, but it’s so painfull to maintain that I’m trying another approach.
So, and to sum all up:
We can float the three columns left, but then I need to center floated elements, and normally, we get more trouble then solutions on that path. (try it, no dice so far).
I can insist on float left those three columns, but have no background associated on each of those columns, and have the container background with the “three columns” as an image.
But this will not make much sense, because if we have the content floated, it will drop uppon resize, but the same will not occur with the image.
I can forget the float and concentrate on display inline-block and hack it on IE7 with zoom:1; and display:inline;
I can display inline block the text elements; Build the columns with CSS; and Try to center them all, and just use the rounded image. - Try it already here.
I can use the ALL column as an image, and display inline block the text elements. Try it already here.
I can use the ALL three columns as an image on a container, and then, display inline-block the elements. - Less flexible, and the reason why I’ve not tried this.
@ronpat - I change the absolute remote path and placed a relative image on the background declaration for the sake of your argument. And I’m now able to see the image.
So, apparently, so I hope, this code is a good candidate to achieve the layout on top.
I rest my case for the moment. Thanks a lot for looking into it.
I did not see a red background until now, so whatever you changed has made a big difference. Something was preventing the red background in container1 from rendering in my browser. Good show!
Just for fullish perfectionism, here’s another try, now with position relative.
It seems easier to deal with, then with the position absolute alternative.
Same html structure.
#container1 {
background-color: red;
text-align: center;
}
.main-column {
display: inline-block;
width: 300px;
}
.main-column h2 {
padding-top: 110px;
padding-bottom: 110px;
background: url('../images/caricaKairos.png') no-repeat center top;
margin: 0 auto;
position: relative; /*so that the image stays on top. - WHY this works? Don't know.'*/
}
.text-column {
width: 215px;
background-color: yellow;
margin-top: -120px; /*so that it enters inside the h2*/
padding-top: 120px;
margin-left: auto;
margin-right: auto;
}
.text-column p {
padding: 0 50px;
}
Why position: relative; on H2 makes the background on front, is beyond my understanding. Any clue?
Got it. It makes it have z-index: 0, and due to that, it ignores is markup position, hence, staying on top of static default other elements.
Well, I do understand that the stacking context is changed when an objects is ‘positioned’ and {position:relative} is commonly used for that very purpose. It will move the object to which it is applied near the top of its containing stack.
I place all real information there, and by doing that, I was able to see some limitations.
I added a new element on the markup, a container for the h3 to sit the background there.
That’s just the white-space you get with inline-block. Try this:
.main-column{vertical-align:bottom}
I would have used display:table and table-cell for the equal columns and avoid the in page link bug you get with those massive negative margins. It would also ensure that no matter how much text you have the columns always stay equal unlike your current method. Of course display:table is only IE8+ but you shouldn’t spend too much time on hacking for IE7 as usage is low and unequal columns are no big thing (but you could of course use your method for IE7 and under only).
@Paul O’B I’m aware of that bug but none of those columns will have links.
However, and for the sake of learning, I’ve never used display:table, mainly due to the ie7 limitation, but, since you mentioning, however, that I can use this margin/bottom technique on IE7, while on IE8 and up, the display table. That seems a good approach, I’m just not sure how different will/should the IE7 conditional css be, but I will give it a try.
About the vertical-align bottom, that white space is a white space given to inline-block elements for the letter descendents?
(I end up given line-height: 0 on the container, and specify the line-height on the inner elements, but… well… if vertical-align: bottom makes it… what can I say :D).
Again, I will give a try with display: table and let know about the results.
I’ve made a few changes and the page behave, however, I believe I need more display table cells on this code.
While this works, and was made with minor changes, the text position still depends a lot on margins and padding values.
It would also ensure that no matter how much text you have the columns always stay equal unlike your current method.
Can you please elaborate further on that?
/* Display Table try*/
.project-table {
margin: 0 auto; /*<<-- Added instead of text-align: center;*/
display: table; /*<<-- Added */
}
.project-table .main-column {
display: table-cell; /*<<-- Added */
min-width: 300px;
}
.project-table .main-column .header-column {
height: 235px;
background: url('someImageHere.png') no-repeat center top;
position: relative; /*will give z-index of 0 and place this element on front*/
}
.project-table .main-column .header-column h3 {
margin: 0 auto;
padding-top: 85px;
width: 170px;
text-align: center;
text-transform: uppercase;
font-size: 1.25em;
font-family: Arial;
line-height: 1.2;
}
.project-table .text-column {
width: 215px;
background-color: #FCE17B;
margin-top: -120px; /*so that it enters inside the h2*/
padding-top: 140px;
margin-left: auto;
margin-right: auto;
min-height: 200px;
}
.project-table .text-column p {
font-size: 1em;
font-family: Arial;
padding: 20px 10px 0 10px;
line-height: 1.2;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:rgba(104, 156, 153, 0.9) }
.table-wrap {
width:960px;
border:1px solid #000;
overflow:hidden;
margin:20px auto;
}
.wrap {
display:table;
width:960px;
table-layout:fixed;
border-spacing:88px 0;
height:200px;
text-align:center;
margin-left:-88px;
}
.column {
background:#FCE17B;
display:table-cell;
vertical-align:middle;
width:261px;
padding:25px 0;
}
.column p { padding:0 25px }
</style>
</head>
<body>
<div class="table-wrap">
<div class="wrap">
<div class="column">
<p>Acessível a todas as associações de animais abandonados a nível nacional.</p>
</div>
<div class="column mid">
<p>De modo a propiciar e aumentar significamente o número de adopções responsáveis.</p>
</div>
<div class="column">
<p>De forma a sensibilizar, divulgar e instigar o esclarecimento de questões que promovam e permitam a mudança de paradigmas culturais obsoletos.</p>
</div>
</div>
</div>
<div class="table-wrap">
<div class="wrap">
<div class="column">
<p>Acessível a todas as associações de animais abandonados a nível nacional.</p>
</div>
<div class="column mid">
<p>De modo a propiciar e aumentar significamente o número de adopções responsáveis.</p>
</div>
<div class="column">
<p>De forma a sensibilizar, divulgar e instigar o esclarecimento de questões que promovam e permitam a mudança de paradigmas culturais obsoletos.</p>
<p>De forma a sensibilizar, divulgar e instigar o esclarecimento de questões que promovam e permitam a mudança de paradigmas culturais obsoletos.</p>
<p>De forma a sensibilizar, divulgar e instigar o esclarecimento de questões que promovam e permitam a mudança de paradigmas culturais obsoletos.</p>
</div>
</div>
</div>
</body>
</html>
The challenge is making the space between cells which is achieved through border-spacing and then offsetting the difference with a negative left margin.
Can you please elaborate further on that?
Yes, just increase your text content to more than 200px and all your columns become uneven - unlike the ones in my demo above.
Please Paul O’B don’t take me wrong. I have registered a possible way of doing it using tables and I realize the limitations of my earlier approach.
But if I change now the markup and the css overall structure I would need a lot more hours that the ones I have to offer for properly solving this.
Since we are not having any links inside those columns, and since this is already working on IE7, IE8 I will take that road.
IE7 is still something to consider, and it would also take some time to proper make those columns side by side on IE, since the “display:inline” will not do. I would perhaps need to go on float…
Again, I will take your last structure code, on a project where I can rely from the very beginning on display:table; and your suggestion.
Thank you all, for your time here and again, sorry for not being able to follow the display:table; path.
