HTML formatting with styles — Just give up and use tables?

Multi tool use
Multi tool use





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















I'll preface this question by stating I have historically used tables for my HTML formatting and am fairly good at getting it to look the way I'd like... I am aware that tables are meant for "tabular data" and not formatting. I always get a bit frustrated when I try to do it the "right way", so today I am seeking some help.



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
<a href="a.html" style="margin: auto 0px auto 0px">
<img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px;">A Link</a>
</div>

<div style="width: 50%; float: right;">
<a href="b.html">B Link</a>
</div>

</div>


As you can see from my attempts above, I'd like for the image link and the 2 text links to all line up along the same horizontal line (i.e. text links at the center of the image). Depending on how wide the parent div is I'd like the A img/link and B link a reasonable distance from one another. I'd also like for the divs with the "float: left" and "float: right" styles to not extend south beyond the border of the parent div (for some reason it is doing that to me in firefox with the above code).



Please help set me straight? Am I the only one who finds "the right way" of formatting things to be a big pain in the rear? I'm hoping I'm missing something big that if corrected will get me going down the right path.



===============



Update, thanks for the comments, I went to jsfiddle and fiddled a table-based solution:



   <table style="width: 90%; margin: 0px auto 0px auto;">
<tr>
<td style="width: 50%;"><a href="a.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /></a><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
<td style=""><a href="b.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /></a><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
</tr>
</table>


Yields the desired layout:



Desired Layout



I think it must be my misunderstanding/usage of floats and positions that always stings me when I try div-based layouts.










share|improve this question




















  • 1





    Could you put an image of what you're after up? It'll make helping loads easier. Ta

    – SpaceBeers
    Feb 2 '12 at 15:29











  • Or a link to a fiddle would be good too. Btw, CSS may be simple but it's definitely not easy to get it just right.

    – Alex Morales
    Feb 2 '12 at 15:34













  • As the saying goes, "If you need a hammer, use a hammer..." Seriously, I've found complex div based layouts a headache, though I've found sites like positioniseverything.net helpful to figure out div based layouts. (Long as you stay away from deeply nested tables I think you'll be OK...wow, I'm showing my age!)

    – Tim
    Feb 2 '12 at 15:42













  • There is certainly a place for just doing your own thing... but if you don't use standard development procedures, you can cause major problems for those who come behind you... think IE

    – SamStar
    Feb 2 '12 at 15:45






  • 1





    "Am I the only one who finds "the right way" of formatting things to be a big pain in the rear?" No, you're definitively not the only one. We are at least two ... :)

    – Fabian Barney
    Feb 2 '12 at 15:56


















1















I'll preface this question by stating I have historically used tables for my HTML formatting and am fairly good at getting it to look the way I'd like... I am aware that tables are meant for "tabular data" and not formatting. I always get a bit frustrated when I try to do it the "right way", so today I am seeking some help.



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
<a href="a.html" style="margin: auto 0px auto 0px">
<img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px;">A Link</a>
</div>

<div style="width: 50%; float: right;">
<a href="b.html">B Link</a>
</div>

</div>


As you can see from my attempts above, I'd like for the image link and the 2 text links to all line up along the same horizontal line (i.e. text links at the center of the image). Depending on how wide the parent div is I'd like the A img/link and B link a reasonable distance from one another. I'd also like for the divs with the "float: left" and "float: right" styles to not extend south beyond the border of the parent div (for some reason it is doing that to me in firefox with the above code).



Please help set me straight? Am I the only one who finds "the right way" of formatting things to be a big pain in the rear? I'm hoping I'm missing something big that if corrected will get me going down the right path.



===============



Update, thanks for the comments, I went to jsfiddle and fiddled a table-based solution:



   <table style="width: 90%; margin: 0px auto 0px auto;">
<tr>
<td style="width: 50%;"><a href="a.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /></a><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
<td style=""><a href="b.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /></a><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
</tr>
</table>


Yields the desired layout:



Desired Layout



I think it must be my misunderstanding/usage of floats and positions that always stings me when I try div-based layouts.










share|improve this question




















  • 1





    Could you put an image of what you're after up? It'll make helping loads easier. Ta

    – SpaceBeers
    Feb 2 '12 at 15:29











  • Or a link to a fiddle would be good too. Btw, CSS may be simple but it's definitely not easy to get it just right.

    – Alex Morales
    Feb 2 '12 at 15:34













  • As the saying goes, "If you need a hammer, use a hammer..." Seriously, I've found complex div based layouts a headache, though I've found sites like positioniseverything.net helpful to figure out div based layouts. (Long as you stay away from deeply nested tables I think you'll be OK...wow, I'm showing my age!)

    – Tim
    Feb 2 '12 at 15:42













  • There is certainly a place for just doing your own thing... but if you don't use standard development procedures, you can cause major problems for those who come behind you... think IE

    – SamStar
    Feb 2 '12 at 15:45






  • 1





    "Am I the only one who finds "the right way" of formatting things to be a big pain in the rear?" No, you're definitively not the only one. We are at least two ... :)

    – Fabian Barney
    Feb 2 '12 at 15:56














1












1








1








I'll preface this question by stating I have historically used tables for my HTML formatting and am fairly good at getting it to look the way I'd like... I am aware that tables are meant for "tabular data" and not formatting. I always get a bit frustrated when I try to do it the "right way", so today I am seeking some help.



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
<a href="a.html" style="margin: auto 0px auto 0px">
<img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px;">A Link</a>
</div>

<div style="width: 50%; float: right;">
<a href="b.html">B Link</a>
</div>

</div>


As you can see from my attempts above, I'd like for the image link and the 2 text links to all line up along the same horizontal line (i.e. text links at the center of the image). Depending on how wide the parent div is I'd like the A img/link and B link a reasonable distance from one another. I'd also like for the divs with the "float: left" and "float: right" styles to not extend south beyond the border of the parent div (for some reason it is doing that to me in firefox with the above code).



Please help set me straight? Am I the only one who finds "the right way" of formatting things to be a big pain in the rear? I'm hoping I'm missing something big that if corrected will get me going down the right path.



===============



Update, thanks for the comments, I went to jsfiddle and fiddled a table-based solution:



   <table style="width: 90%; margin: 0px auto 0px auto;">
<tr>
<td style="width: 50%;"><a href="a.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /></a><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
<td style=""><a href="b.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /></a><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
</tr>
</table>


Yields the desired layout:



Desired Layout



I think it must be my misunderstanding/usage of floats and positions that always stings me when I try div-based layouts.










share|improve this question
















I'll preface this question by stating I have historically used tables for my HTML formatting and am fairly good at getting it to look the way I'd like... I am aware that tables are meant for "tabular data" and not formatting. I always get a bit frustrated when I try to do it the "right way", so today I am seeking some help.



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
<a href="a.html" style="margin: auto 0px auto 0px">
<img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px;">A Link</a>
</div>

<div style="width: 50%; float: right;">
<a href="b.html">B Link</a>
</div>

</div>


As you can see from my attempts above, I'd like for the image link and the 2 text links to all line up along the same horizontal line (i.e. text links at the center of the image). Depending on how wide the parent div is I'd like the A img/link and B link a reasonable distance from one another. I'd also like for the divs with the "float: left" and "float: right" styles to not extend south beyond the border of the parent div (for some reason it is doing that to me in firefox with the above code).



Please help set me straight? Am I the only one who finds "the right way" of formatting things to be a big pain in the rear? I'm hoping I'm missing something big that if corrected will get me going down the right path.



===============



Update, thanks for the comments, I went to jsfiddle and fiddled a table-based solution:



   <table style="width: 90%; margin: 0px auto 0px auto;">
<tr>
<td style="width: 50%;"><a href="a.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /></a><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
<td style=""><a href="b.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /></a><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
</tr>
</table>


Yields the desired layout:



Desired Layout



I think it must be my misunderstanding/usage of floats and positions that always stings me when I try div-based layouts.







html css html-table






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 22:28









Brian Tompsett - 汤莱恩

4,2521339103




4,2521339103










asked Feb 2 '12 at 15:24









mikeymikey

4,04521727




4,04521727








  • 1





    Could you put an image of what you're after up? It'll make helping loads easier. Ta

    – SpaceBeers
    Feb 2 '12 at 15:29











  • Or a link to a fiddle would be good too. Btw, CSS may be simple but it's definitely not easy to get it just right.

    – Alex Morales
    Feb 2 '12 at 15:34













  • As the saying goes, "If you need a hammer, use a hammer..." Seriously, I've found complex div based layouts a headache, though I've found sites like positioniseverything.net helpful to figure out div based layouts. (Long as you stay away from deeply nested tables I think you'll be OK...wow, I'm showing my age!)

    – Tim
    Feb 2 '12 at 15:42













  • There is certainly a place for just doing your own thing... but if you don't use standard development procedures, you can cause major problems for those who come behind you... think IE

    – SamStar
    Feb 2 '12 at 15:45






  • 1





    "Am I the only one who finds "the right way" of formatting things to be a big pain in the rear?" No, you're definitively not the only one. We are at least two ... :)

    – Fabian Barney
    Feb 2 '12 at 15:56














  • 1





    Could you put an image of what you're after up? It'll make helping loads easier. Ta

    – SpaceBeers
    Feb 2 '12 at 15:29











  • Or a link to a fiddle would be good too. Btw, CSS may be simple but it's definitely not easy to get it just right.

    – Alex Morales
    Feb 2 '12 at 15:34













  • As the saying goes, "If you need a hammer, use a hammer..." Seriously, I've found complex div based layouts a headache, though I've found sites like positioniseverything.net helpful to figure out div based layouts. (Long as you stay away from deeply nested tables I think you'll be OK...wow, I'm showing my age!)

    – Tim
    Feb 2 '12 at 15:42













  • There is certainly a place for just doing your own thing... but if you don't use standard development procedures, you can cause major problems for those who come behind you... think IE

    – SamStar
    Feb 2 '12 at 15:45






  • 1





    "Am I the only one who finds "the right way" of formatting things to be a big pain in the rear?" No, you're definitively not the only one. We are at least two ... :)

    – Fabian Barney
    Feb 2 '12 at 15:56








1




1





Could you put an image of what you're after up? It'll make helping loads easier. Ta

– SpaceBeers
Feb 2 '12 at 15:29





Could you put an image of what you're after up? It'll make helping loads easier. Ta

– SpaceBeers
Feb 2 '12 at 15:29













Or a link to a fiddle would be good too. Btw, CSS may be simple but it's definitely not easy to get it just right.

– Alex Morales
Feb 2 '12 at 15:34







Or a link to a fiddle would be good too. Btw, CSS may be simple but it's definitely not easy to get it just right.

– Alex Morales
Feb 2 '12 at 15:34















As the saying goes, "If you need a hammer, use a hammer..." Seriously, I've found complex div based layouts a headache, though I've found sites like positioniseverything.net helpful to figure out div based layouts. (Long as you stay away from deeply nested tables I think you'll be OK...wow, I'm showing my age!)

– Tim
Feb 2 '12 at 15:42







As the saying goes, "If you need a hammer, use a hammer..." Seriously, I've found complex div based layouts a headache, though I've found sites like positioniseverything.net helpful to figure out div based layouts. (Long as you stay away from deeply nested tables I think you'll be OK...wow, I'm showing my age!)

– Tim
Feb 2 '12 at 15:42















There is certainly a place for just doing your own thing... but if you don't use standard development procedures, you can cause major problems for those who come behind you... think IE

– SamStar
Feb 2 '12 at 15:45





There is certainly a place for just doing your own thing... but if you don't use standard development procedures, you can cause major problems for those who come behind you... think IE

– SamStar
Feb 2 '12 at 15:45




1




1





"Am I the only one who finds "the right way" of formatting things to be a big pain in the rear?" No, you're definitively not the only one. We are at least two ... :)

– Fabian Barney
Feb 2 '12 at 15:56





"Am I the only one who finds "the right way" of formatting things to be a big pain in the rear?" No, you're definitively not the only one. We are at least two ... :)

– Fabian Barney
Feb 2 '12 at 15:56












2 Answers
2






active

oldest

votes


















3














Personally I'd do it like this - http://jsfiddle.net/spacebeers/nWNPm/7/



.magLink {
list-style: none;
height: 50px;
float: left;
margin: 0 50px 0 0;
}

.magLink li {
float: left;
height: 50px;
display: table;
}

.magLink li a {
height: 50px;
display: table-cell;
vertical-align: middle;
}


<ul class="magLink">
<li><a href="#"><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></a></li>
<li><a href="#">Link A</a></li>
</ul>


You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I've set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.



EDIT:



JSFiddle's running pretty badly so here's an image of the output in case it's not working.



enter image description here



Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.






share|improve this answer


























  • "tables for layout have had their day man" ha - I'm trying -- Thanks for the examples!

    – mikey
    Feb 2 '12 at 17:27











  • No worries. When I have to make changes to sites I did using tables I want to murder myself.

    – SpaceBeers
    Feb 2 '12 at 17:27



















1














From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?



Edit



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px; position:absolute; top:15px;">A Link</a>
</div>

<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
<a href="b.html" style="margin: auto 0px auto 0px; position:absolute; left:50px; top:15px;">B Link</a>
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>

</div>


That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)






share|improve this answer


























  • They'll be 50% of the parent container, not the page.

    – SpaceBeers
    Feb 2 '12 at 15:40













  • Ok. I think I had a problem similar to this a while back and that is how I fixed it, but I may not be remembering correctly...

    – SamStar
    Feb 2 '12 at 15:42











  • it may be a matter of just setting the parent element to position:relative

    – SamStar
    Feb 2 '12 at 15:48












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f9114901%2fhtml-formatting-with-styles-just-give-up-and-use-tables%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









3














Personally I'd do it like this - http://jsfiddle.net/spacebeers/nWNPm/7/



.magLink {
list-style: none;
height: 50px;
float: left;
margin: 0 50px 0 0;
}

.magLink li {
float: left;
height: 50px;
display: table;
}

.magLink li a {
height: 50px;
display: table-cell;
vertical-align: middle;
}


<ul class="magLink">
<li><a href="#"><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></a></li>
<li><a href="#">Link A</a></li>
</ul>


You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I've set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.



EDIT:



JSFiddle's running pretty badly so here's an image of the output in case it's not working.



enter image description here



Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.






share|improve this answer


























  • "tables for layout have had their day man" ha - I'm trying -- Thanks for the examples!

    – mikey
    Feb 2 '12 at 17:27











  • No worries. When I have to make changes to sites I did using tables I want to murder myself.

    – SpaceBeers
    Feb 2 '12 at 17:27
















3














Personally I'd do it like this - http://jsfiddle.net/spacebeers/nWNPm/7/



.magLink {
list-style: none;
height: 50px;
float: left;
margin: 0 50px 0 0;
}

.magLink li {
float: left;
height: 50px;
display: table;
}

.magLink li a {
height: 50px;
display: table-cell;
vertical-align: middle;
}


<ul class="magLink">
<li><a href="#"><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></a></li>
<li><a href="#">Link A</a></li>
</ul>


You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I've set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.



EDIT:



JSFiddle's running pretty badly so here's an image of the output in case it's not working.



enter image description here



Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.






share|improve this answer


























  • "tables for layout have had their day man" ha - I'm trying -- Thanks for the examples!

    – mikey
    Feb 2 '12 at 17:27











  • No worries. When I have to make changes to sites I did using tables I want to murder myself.

    – SpaceBeers
    Feb 2 '12 at 17:27














3












3








3







Personally I'd do it like this - http://jsfiddle.net/spacebeers/nWNPm/7/



.magLink {
list-style: none;
height: 50px;
float: left;
margin: 0 50px 0 0;
}

.magLink li {
float: left;
height: 50px;
display: table;
}

.magLink li a {
height: 50px;
display: table-cell;
vertical-align: middle;
}


<ul class="magLink">
<li><a href="#"><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></a></li>
<li><a href="#">Link A</a></li>
</ul>


You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I've set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.



EDIT:



JSFiddle's running pretty badly so here's an image of the output in case it's not working.



enter image description here



Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.






share|improve this answer















Personally I'd do it like this - http://jsfiddle.net/spacebeers/nWNPm/7/



.magLink {
list-style: none;
height: 50px;
float: left;
margin: 0 50px 0 0;
}

.magLink li {
float: left;
height: 50px;
display: table;
}

.magLink li a {
height: 50px;
display: table-cell;
vertical-align: middle;
}


<ul class="magLink">
<li><a href="#"><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></a></li>
<li><a href="#">Link A</a></li>
</ul>


You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I've set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.



EDIT:



JSFiddle's running pretty badly so here's an image of the output in case it's not working.



enter image description here



Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.







share|improve this answer














share|improve this answer



share|improve this answer








edited Feb 2 '12 at 17:06

























answered Feb 2 '12 at 16:53









SpaceBeersSpaceBeers

10.8k53858




10.8k53858













  • "tables for layout have had their day man" ha - I'm trying -- Thanks for the examples!

    – mikey
    Feb 2 '12 at 17:27











  • No worries. When I have to make changes to sites I did using tables I want to murder myself.

    – SpaceBeers
    Feb 2 '12 at 17:27



















  • "tables for layout have had their day man" ha - I'm trying -- Thanks for the examples!

    – mikey
    Feb 2 '12 at 17:27











  • No worries. When I have to make changes to sites I did using tables I want to murder myself.

    – SpaceBeers
    Feb 2 '12 at 17:27

















"tables for layout have had their day man" ha - I'm trying -- Thanks for the examples!

– mikey
Feb 2 '12 at 17:27





"tables for layout have had their day man" ha - I'm trying -- Thanks for the examples!

– mikey
Feb 2 '12 at 17:27













No worries. When I have to make changes to sites I did using tables I want to murder myself.

– SpaceBeers
Feb 2 '12 at 17:27





No worries. When I have to make changes to sites I did using tables I want to murder myself.

– SpaceBeers
Feb 2 '12 at 17:27













1














From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?



Edit



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px; position:absolute; top:15px;">A Link</a>
</div>

<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
<a href="b.html" style="margin: auto 0px auto 0px; position:absolute; left:50px; top:15px;">B Link</a>
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>

</div>


That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)






share|improve this answer


























  • They'll be 50% of the parent container, not the page.

    – SpaceBeers
    Feb 2 '12 at 15:40













  • Ok. I think I had a problem similar to this a while back and that is how I fixed it, but I may not be remembering correctly...

    – SamStar
    Feb 2 '12 at 15:42











  • it may be a matter of just setting the parent element to position:relative

    – SamStar
    Feb 2 '12 at 15:48
















1














From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?



Edit



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px; position:absolute; top:15px;">A Link</a>
</div>

<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
<a href="b.html" style="margin: auto 0px auto 0px; position:absolute; left:50px; top:15px;">B Link</a>
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>

</div>


That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)






share|improve this answer


























  • They'll be 50% of the parent container, not the page.

    – SpaceBeers
    Feb 2 '12 at 15:40













  • Ok. I think I had a problem similar to this a while back and that is how I fixed it, but I may not be remembering correctly...

    – SamStar
    Feb 2 '12 at 15:42











  • it may be a matter of just setting the parent element to position:relative

    – SamStar
    Feb 2 '12 at 15:48














1












1








1







From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?



Edit



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px; position:absolute; top:15px;">A Link</a>
</div>

<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
<a href="b.html" style="margin: auto 0px auto 0px; position:absolute; left:50px; top:15px;">B Link</a>
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>

</div>


That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)






share|improve this answer















From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?



Edit



<div style="width: 90%;">

<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
<a href="a.html" style="margin: auto 0px auto 0px; position:absolute; top:15px;">A Link</a>
</div>

<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
<a href="b.html" style="margin: auto 0px auto 0px; position:absolute; left:50px; top:15px;">B Link</a>
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>

</div>


That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)







share|improve this answer














share|improve this answer



share|improve this answer








edited Feb 2 '12 at 16:58

























answered Feb 2 '12 at 15:38









SamStarSamStar

195116




195116













  • They'll be 50% of the parent container, not the page.

    – SpaceBeers
    Feb 2 '12 at 15:40













  • Ok. I think I had a problem similar to this a while back and that is how I fixed it, but I may not be remembering correctly...

    – SamStar
    Feb 2 '12 at 15:42











  • it may be a matter of just setting the parent element to position:relative

    – SamStar
    Feb 2 '12 at 15:48



















  • They'll be 50% of the parent container, not the page.

    – SpaceBeers
    Feb 2 '12 at 15:40













  • Ok. I think I had a problem similar to this a while back and that is how I fixed it, but I may not be remembering correctly...

    – SamStar
    Feb 2 '12 at 15:42











  • it may be a matter of just setting the parent element to position:relative

    – SamStar
    Feb 2 '12 at 15:48

















They'll be 50% of the parent container, not the page.

– SpaceBeers
Feb 2 '12 at 15:40







They'll be 50% of the parent container, not the page.

– SpaceBeers
Feb 2 '12 at 15:40















Ok. I think I had a problem similar to this a while back and that is how I fixed it, but I may not be remembering correctly...

– SamStar
Feb 2 '12 at 15:42





Ok. I think I had a problem similar to this a while back and that is how I fixed it, but I may not be remembering correctly...

– SamStar
Feb 2 '12 at 15:42













it may be a matter of just setting the parent element to position:relative

– SamStar
Feb 2 '12 at 15:48





it may be a matter of just setting the parent element to position:relative

– SamStar
Feb 2 '12 at 15:48


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f9114901%2fhtml-formatting-with-styles-just-give-up-and-use-tables%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







G Squ1 QhF84uEkHPn02gk 4HS WSN ESLn5 95sWKYH0xw1OFYUIaVX0n
DvFDVvlINq T6FEcwsXCT,cG5p NwSHaK,Lfegt b6VTX,uJfZPYfO

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas