SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    tabless flexible full width in a div

    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>layOut</title>
    
    <style type="text/css">
    * { margin:0; padding:0;}
    .wrapper{
    float: left;
    width: 100%;
    }
    .margin5 {
    margin:5px;
    }
    #left2liquid{
    margin-right: 200px; 
    }
    #right2column{
    float: left;
    width: 200px; 
    margin-left: -200px; 
    background: #FDE95E;
    }
    </style>
    </head>
    <body>
    
    <div class="wrapper">
    <div id="left2liquid">
    
    <div class="margin5">my domain</div>
    </div>
    </div>
    
    
    <div id="right2column">
    
    <div class="margin5">
    
      <span style="width:100%;background-color:pink">tabless cell</span>
      <span></span>
      <span style="background-color:lightblue">ab</span>
    
    <table>
      <tr>
        <td style="width:100%;background-color:lightgreen">table cell</td>
        <td></td>
        <td style="background-color:lightblue">ab</td>
      </tr>
    </table>
    
    </div>
    </div>
    
    </body>
    </html>
    http://dot.kr/x-test/tablessFullWidth1.php has the code above.

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You kind of need to work out what your aim is here. One option might be

    Code:
    span {display: table-cell}
    but there are lots of ifs here.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, ralph.m.
    I modified the code above like the following by your help.
    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>layOut</title>
    <style type="text/css">
    * { margin:0; padding:0;}
    .wrapper{
    float: left;
    width: 100%;
    }
    
    .margin5 {
    margin:5px;
    }
    
    #left2liquid{
    margin-right: 200px; 
    }
    
    #right2column{
    float: left;
    width: 200px; 
    margin-left: -200px; 
    background: #FDE95E;
    }
    
    </style>
    </head>
    <body>
    
    <div class="wrapper">
    <div id="left2liquid">
    <div class="margin5">my domain</div>
    </div>
    </div>
    
    <div id="right2column">
    <div class="margin5">
      <span style="width:100%;background-color:pink;display:table-cell">tabless cell</span>
      <span style="width:10px;display:table-cell"></span>
      <span style="background-color:lightblue;display:table-cell">ab</span>
    </div>
    </div>
    
    </body>
    </html>
    How can I make space between the red cell and the blue cell at http://dot.kr/x-test/tablessSpace.php which has the code above?

    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.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <!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?

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    why use inline-level elements on what looks like block level elements?
    inline-level elements is just for this question. I'll use outer style sheet when I deploy it.

    Quote Originally Posted by deathshadow60 View Post
    Why not just switch the source order and float the latter element?
    I don't exactly know the result of the source order especially when float thing comes.

    Quote Originally Posted by deathshadow60 View Post
    What is the actual content going to be so we can use semantic markup instead of presentational?
    That's very kind of you.

    Quote Originally Posted by deathshadow60 View Post
    of course that kind of goes hand in hand with the vague use of presentational classes like "margin5" or "right2column"
    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.

    Quote Originally Posted by deathshadow60 View Post
    that oddball empty span for christmas only knows what...
    I don't know it exactly, I am not a native speaker of English.

    Quote Originally Posted by deathshadow60 View Post
    but really if you are trying to recreate a table type structure, are you sure that's not actually tabular data?
    That's not a tabular data.

    The code below is some part of the url http://dot.kr/x-test/tablessLayout.php which has more code.
    Code:
    <div id="sideBar">
    
     <div class="subCell">01</div>
    
     <div class="cell" style="text-align:center">guest</div>
    
     <div class="subCell" style="height:5px"></div>
    
     <div class="cell" style="height:5px"></div>
    
     <div class="subCell">00</div>
    
     <div class="cell" style="text-align:center">logIn</div>
    
    <table>
      <tr>
        <td colspan="2" style="width:100%;background-color:lightgreen;text-align:center">guest</td>
        <td style="width:10px"></td>
        <td style="background-color:lightgreen;">00</td>
      </tr>
      <tr>
        <td colspan="4" style="width:100%;height:5px;background-color:lightgreen;"></td>
      </tr>
    </table>
    
    <table>
      <tr>
        <td style="background-color:lightgreen;">00</td>
        <td style="width:10px"></td>
        <td colspan="2" style="width:100%;background-color:lightgreen;text-align:center">logIn</td>
      </tr>
    </table>
    
     <!-- #sideBar -->
    </div>
    I like to make the green part of the url which has table to tabless.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •