It has 2 cells. the first one is red cell which is made without table and
the other is green cell which is made with table.
The red cell is one of my trials for making the result of green cell which is made with table.
My target result is the green cell but without table which is made with table at http://dot.kr/x-test/tablessFullWidth1.php.
I like to make the result like the green cell which is streched to the right fully but without table.
Although I put the code <span style=“width:10px;display:table-cell”></span> between the red cell and the blue cell for making space, it seems not to work.
I end up with more questions than answers from that – why use inline-level elements on what looks like block level elements? Why not just switch the source order and float the latter element? What is the actual content going to be so we can use semantic markup instead of presentational?
The last of those is where I think there may be a bit of a logic disconnect in playing with a bunch of SPAN that way… of course that kind of goes hand in hand with the vague use of presentational classes like “margin5” or “right2column”… the extra DIV for nothing, that oddball empty span for christmas only knows what…
I’d be doing something more like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<title>
layOut
</title>
<style type="text/css">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
#contentWrapper {
float:left;
width:100%;
}
#content {
margin-right:200px;
padding:5px;
}
#sideBar {
float: left;
width: 200px;
margin-left: -200px;
padding-top:5px;
background: #FDE95E;
}
#sideBar .subCell {
clear:both;
float:right;
display:inline; /* prevent IE margin doubling */
margin:0 5px 5px;
background:lightblue;
}
#sideBar .cell {
overflow:hidden; /* prevent element from rendering behind float */
zoom:1; /* trip haslayout, make IE not put element behind float */
margin:0 0 5px 5px;
background:pink;
}
</style>
</head><body>
<div id="contentWrapper"><div id="content">
my domain
<!-- #content, #contentWrapper --></div></div>
<div id="sideBar">
<div class="subCell">ab</div>
<div class="cell">tabless cell</div>
<div class="subCell">ab</div>
<div class="cell">tabless cell let's test one with enough content to make it wordwrap</div>
<div class="subCell">ab</div>
<div class="cell">tabless cell</div>
<!-- #sideBar --></div>
</body></html>
but really if you are trying to recreate a table type structure, are you sure that’s not actually tabular data?
inline-level elements is just for this question. I’ll use outer style sheet when I deploy it.
I don’t exactly know the result of the source order especially when float thing comes.
That’s very kind of you.
margin5 will use in another code in the same page. I have right3column in the page so I name it for discriminating and understanding it and its structure quickly.
I like to discuss about them later instead of this time because too many point will make vague the real point. I like to go step by step.
I don’t know it exactly, I am not a native speaker of English.