Is it possible to layout span/div in this way?

Question

Im generating a table in php, and would like it in the top left of the screen. The table varies slightly in width so directly to the right of it should go two blocks of text (text1, text2) and a third text (text3) which floats in the topmost right of the screen. Below the three texts should be text4.

Requirements: Text1 needs to always be to the right of the table. text4 always needs to be below the top 3 texts.

I uploaded an image with the span/div/table/text and have literally been trying to arrange these for about 1.5 hours now. it seems like it should be really simple but im struggling with my requirements and one of them always seems to misalign. (all the 'texts' are just pieces of html text (not <input type=text or <textarea>)

Edit: Thankyou, is it possible without using libraries or bootstrap?

Why would you not use bootstrap, if you use the table method it will fall short of most modern websites. I think you should revisit what you are looking to do in programming as bootstrap is only CSS, all good websites now days are responsive. — hjardine, Dec 04 '15 at 08:47
(Not necessarily bootstrap, but it is a good example of how to use CSS effectively) — hjardine, Dec 04 '15 at 09:13
It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Dec 04 '15 at 09:39

dusk · Answer 1 · 2015-12-04T10:41:32.953

If you don't like using <table> tags for layouts, and don't like an extra large dependency to your project (like bootstrap), one could go for the following option:

<div class="table">
  Table
</div>
<div class="text-container">
  <div class="text1">
    Text1
  </div>
  <div class="text2">
    Text2
  </div>
  <div class="text3">
    Text3
  </div>
  <div class="text4">
    Text4
  </div>
</div>

It is crucial that the display type of .table, .text-container and .text{1,2,3} are all display: inline-block;. This will make them inline. However, to force wrapping of .text4, this will still have to be display: block;.

https://jsfiddle.net/nnLofpL1/

Like hjardine uses in his example: it may also be a good idea to look to the clear property.

I agree with this, Bootstrap isn't necessary, but it is a good example of splitting Content and Style. +1 from me — hjardine, Dec 04 '15 at 09:11

hjardine · Answer 2 · 2015-12-04T09:46:32.110

I can see you don't want to use bootstrap so i have updated an answer so that you don't have to use a table either, exact same output but without the problems of using a table for output.

.div1{float:left;width:40%;border:1px solid #000;min-height:200px;}
.div2{float:right;width:58%;border:1px solid #000;min-height:200px;}
.row1{min-height:100px;}
.sp1{float:left;width:30%;padding:4px;border:1px solid #000;min-height:60px;}
.sp2{float:left;width:30%;padding:4px;border:1px solid #000;min-height:60px;}
.sp3{float:right;width:30%;text-align:right;padding:4px;border:1px solid #000;min-height:60px;}
.divRow{width:100%;border: 1px solid #000;}

<div>
  <div class="div1">
     <div class="divRow">1</div>
     <div class="divRow">2</div>
     <div class="divRow">3</div>
     <div class="divRow">4</div>
     <div class="divRow">5</div>
     <div class="divRow">6</div>
  </div>
  
  <div class="div2">
    <div>
      <div class="row1">
        <div class="sp1">1</div>
        <div class="sp2">2</div>
        <div class="sp3">3</div>
        <div style="clear:both;"></div>
      </div>
      <div class="row2" style="border:1px solid #000;min-height:40px;">
        sadsadsad
      </div>
    </div>  
  </div>
  <div style="clear:both;">
    
  </div>
</div>

An easy solution to laying out a page so that things are where you want them is using bootstrap, because of the grid layout in bootstrap you can keep things in the same relative positions no matter what the size of the page is.

For what you want to do i think it would benefit you greatly.

EXAMPLE

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="Container">
<div class="row">
   <div class="col-xs-2">
        Top left
   </div>
   <div class="col-xs-2 col-xs-offset-8">
        Top right
   </div>
</div>
</div>

This is a link to Bootstrap which is well worth learning IMHO!

@Leothelion No need, I was just showing that they can do what the wanted without using bad practices (coding wise). Fiddles are made to be fiddled with by people, they aren't a persons IP and it certainly isn't bad practice to use another persons Fiddle and improve it. Hence the ability to update fiddles without the need to login etc. — hjardine, Dec 04 '15 at 09:37
Hope you get my point. Same in my case where i have used table as it just depends user/developer as per need and you just can't say its bad practise just because of one person. have luck. — Leo the lion, Dec 04 '15 at 09:39
@Leothelion Why did you delete your question? They are different situations and FYI it is a community recognised bad practice to use tables for styling: some recommended (impartial) reading - [Why not use tables for layout](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html), [Pros and cons of tables and divs](http://www.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/), [The jsFiddle site brands it as a Web playground](http://www.techrepublic.com/blog/software-engineer/jsfiddle-an-online-playground-for-your-javascript-html-css/) — hjardine, Dec 04 '15 at 09:43

score 0 · Answer 3 · answered Dec 04 '15 at 08:44

However it is not the nicest solution, the classic "table in table" does the job:

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>PHP generated data</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr style="height: 60px;">
          <td>Text 1</td>
          <td style="padding-left: 100px;">Text 2</td>
          <td style="width: 200px; text-align: right;">Text 3</td>
        </tr>
        <tr style="height: 60px;">
          <td colspan="3">Text 4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

https://jsfiddle.net/jrrfbqfk/

Because it works. OP also said he doesn't want to use bootstrap or other libraries neither. You can write a HTML/CSS-only solution without table, or display:table, and without bootstrap, but I don't really see the point here. — marcias, Dec 04 '15 at 08:51

Is it possible to layout span/div in this way?

3 Answers3