HTML formatting with styles — Just give up and use tables?
Multi tool use
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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:
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
|
show 3 more comments
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:
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
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
|
show 3 more comments
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:
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
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:
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
html css html-table
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
|
show 3 more comments
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
|
show 3 more comments
2 Answers
2
active
oldest
votes
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.
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.
"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
add a comment |
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. :)
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 toposition:relative
– SamStar
Feb 2 '12 at 15:48
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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.
"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
add a comment |
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.
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.
"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
add a comment |
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.
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.
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.
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.
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
add a comment |
"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
add a comment |
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. :)
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 toposition:relative
– SamStar
Feb 2 '12 at 15:48
add a comment |
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. :)
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 toposition:relative
– SamStar
Feb 2 '12 at 15:48
add a comment |
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. :)
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. :)
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 toposition:relative
– SamStar
Feb 2 '12 at 15:48
add a comment |
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 toposition: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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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