Member Avatar for oneat 
<html>

<style>
div {border-color:black;border-size:1;border-style:solid;}
*{margin:0px,0px,0px,0px;}
</style>

<body style="display:inline">

<div style="width:20%;height:30%;display:inline;"></div>
<div style="width:20%;height:30%;display:inline;"></div>


</body>

</html>

I was trying to make an effect like two boxex placed next to each other. But when I am trying to set size divs don't "listen" to me.
They are as big as big is text inside them. What have I done wrong ??
I am going to do something like tables with this so could you help me ?

  • 5 Contributors
  • 9 Replies
  • 90 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Quick diagnosis and fixes (what went wrong)

  • The CSS in the first post has a few syntax/logic problems: using display:inline on body/divs makes boxes shrink to their content; border-size is not a valid property; the comma-separated margin (margin:0px,0px,0px,0px;) is invalid. Percent heights (e.g., height:30%) only work when the parent has an explicit height. As , and suggested, floats or inline-blocks will place boxes side-by-side, and was correct that vertical-align applies to inline-level or table-cell elements only. Remember too that floats come out of normal flow — clear them or use a clearfix/overflow on the parent.

A modern, robust approach

  • Prefer Flexbox for simple two-column layouts and reliable vertical positioning. The example below keeps two boxes side-by-side and pins a child element to the bottom of its column using margin-top: auto;.
<div class="row">
  <div class="col">
    <div class="inner">
      <div>line 1</div>
      <div class="bottom">rozrywa</div>
    </div>
  </div>
  <div class="col">right column content</div>
</div>

<style>
.row { display:flex; gap:12px; }
.col { flex:0 0 20%; height:300px; border:1px solid #000; box-sizing:border-box; display:flex; }
.col .inner { display:flex; flex-direction:column; width:100%; }
.bottom { margin-top:auto; } /* pushes this element to the bottom */
</style>

Extra tips and references

  • If you must use percentage heights, set html, body { height:100%; } or give the parent a fixed height. Use box-sizing:border-box to make widths include padding/borders. For vertical aligning without Flexbox, use display:inline-block or display:table-cell where appropriate. For details see MDN on vertical-align and Flexbox basics.

Recommended Answers

All 9 Replies

Member Avatar for ziad.abourjeily

Hello,

Try to replace the

"display: inline;" with "float: left"

in the style of both divs.

this should work fine

Member Avatar for almostbob 
<html>
<head>
<style type='text/css'>
.cont { border:black 1px solid; width:100%;}
/*css two column table*/
.l2 { width:50%; float:left; padding:0 1%; }
.r2 { width:50%; float:right; padding:0 1%; border-left:black 1px solid; }
/*css 3 column table*/
.l3 { width:33%; float:left; padding:0 1%; border-right:black 1px solid;}
.r3 { width:33%; float:right; padding:0 1%; border-left:black 1px solid; }
.c3 { width:30%; padding:0 1%;}
</style>
</head>
<body>
<p> two column table</p>
<div class='cont'>
<p class='l2'>this text left</p>
<p class='r2'>this text right</p>
</div>
<div class='cont'>
<p class='l2'>this text left</p>
<p class='r2'>this text right</p>
</div>
<p> three column table</p>
<div class='cont'>
<p class='l3'>this text left</p>
<p class='r3'>this text right</p>
<p class='c3'>this text middle</p>
</div>
<div class='cont'>
<p class='l3'>this text left</p>
<p class='r3'>this text right</p>
<p class='c3'>this text middle</p>
</div>

4 5 6 column tables continue in a similar fashion, as do combinations of rows like colspan rowspan

Edited by almostbob because: n/a
Member Avatar for oneat

Is here another easier option ?

Member Avatar for almostbob

for real tabular data a table is still accepted practice

Member Avatar for ko ko

Use inline-block or float. Inline can't help you.
Here is some code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tow Divs Next Each Other</title>
<style type="text/css">
div {
	background: #EEE;
	border: 1px solid gray;
	display: inline-block;
	height: 200px;
	width: 300px;
	max-width: 300px ! important;
	white-space: wrap;
	overflow: hidden
	} 
</style>
</head>
<body>
	<div>
		Content in first box.
	</div> 
	<div>
		Content in second box.
	</div>
</body>
</html>

It may help you.

Member Avatar for oneat

But I want to do something like that:
1 2
Not like that
1
2

Member Avatar for macneato

Hi Oneat,

This is what you want to do [-B-]

Basically heres what you want to do

.container_a {
width:400px;
height:400px;
float:left;
background:red
}

.container_b {
width:200px;
height:400px;
float:left;
background:blue
}
<div class="container_a">
      	<p>this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy</p>
      </div>
      <div class="container_b">
		<p>this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy this is some copy</p>      	
      </div>

Sorted?

There is another little trick that works quite well if you plan to use one container as navigation.

.container_a {
width:400px;
float:left;
background:red
}

.container_b {
width:200px;
background: blue;
position:relative;
margin-left:400px  /* Use the width specified in container_a */
}
Edited by macneato because: n/a
Member Avatar for oneat

At last i have a problem with vertical-align

<html>




<head>

<style>
*{margin:0px 0px 0px 0px;}
div {float:left; }
div div{float: none;background-color:red;height:100%;width:100%; border:white solid 1px;}
div div div div{width:100%;height:15%;}

</style>

</head>

<body>

<div style="width:20%; float:left;text-align:center;">


<div  style="height:20%">
<img src="xa.jpg" id="obrazek" style="width:100%;height:100%;">
</div>


<div style="height:78%">
<div>



<div style="vertical-align: bottom">rozrywa</div>

<div>rozrywka</div>

<div>rozrywka</div>

<div>rozrywka</div>

<div>rozrywka</div>



</div>
</div>


</div>






<div style="width:80%; float:right;display:inline;">
<div  style="height:20%">
<div>
c
</div>
</div>


<div style="height:78%">
<div>
b
</div>
</div>
</div>


</body>
</html>


<script>
document.getElementById("obrazek").src="x.jpg";
</script>

Problem is with this:
<div style="vertical-align: bottom">rozrywa</div>

It doesn't work. What's up ?

Edited by peter_budo because: Correcting code tags
Member Avatar for ko ko

The vertical-align only apply to inline element. You can use inline tags like span instead of div. Here is example:

span {
      vertical-align: top/middle/bottom/baseline/text-top
     }

, for more detail.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.