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
  • 73 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ko ko
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
     }

See here, 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.