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

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?

Answer 1

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.

Answer 2

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/

Answer 3

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!