I’m having trouble placing a div in the right place. Float added but still crashes on the page.I want to get the effect like in the picture:
my css code:
*{
font-family: Helvetica;
}
#div1, #div5{
background: #00838F;
color: white;
padding: 5px;
font-size: 130%;
float:center
}
#div5{
vertical-align: bottom;
}
#div2, #div3{
background: #EFEFEF;
width: 55%;
float: left;
}
#div2{
high: 150px;
}
#div3{
high: 300px;
}
#div4{
background: #4FB3BF;
width: 45%;
high: 450px;
text-align: center;
float:right;
}
img{
box-shadow: 10px 10px 7px DimGray;
margin: 20px;
}
table, tr, td{
border-style: solid;
border-color: #4FB3BF;
border-width:1px;
border-collapse: collapse;
}
table{
margin: auto;
width: 80%;
}
tr,td{
padding:4px
}
td:hover{
background-color: #4FB3BF;
}
the arrangement should be in html but when I tried it, nothing happened at all
html code:
<body>
<div id="div1">
<h1>title</h1>
</div>
<div id="div2">
<h3>small text</h3>
<ol>
<li>skrypt</li>
</ol>
</section>
<section id="div3">
<h3>text</h3>
<table>
<tr>
<th>1</th> <th>2</th> <th>3</th>
</tr>
<tr>
<td>...</td> <td>...</td> <td>...</td>
</tr>
</table>
<div>
<div id="div4">
<p>
<img src="ryba1.jpg" alt="Sum">
</p>
<p><a href="data.txt">information</a>
</p>
</div>
<div id="div5">
<p>Autor</p>
</div>
</body>
</html>
I know this is quite an outdated method but I need to use it.
initially, I wanted to do the tidying up in html using float but nothing changed, after using it in css they moved slightly but it’s still not what I expect
2
Answers
Inside " #div1, #div5{ " I would reconsider "float:center" or suggest finding a different option then using that.
as saying CBroe, grid would lot better to structure your page.
It’s done for that…