I have tried to use the example of the dynamic web site lay out here on the w3 school, and in parts it looks nice, and clean.
But I have a problem with the right Colum; it does not float to the right, even though I have indicated 50% to each Colum, left and right. The only thing I’m going to use the right colum for is to add an image.
I have erased the other colums on the example, maybe that interferes with the final result. But I onle need two colums and the footer. and Header just as I've made it here
Could anyone help me out with that problem?
And thanks a lot.
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
color:#FFD700;
padding: 30px;
text-align: center;
background: black;
}
.header h1 {
font-size: 50px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 50%;
height:350px;
background-color:black;
}
/* Right column */
.rightcolumn {
float: right;
width: 50%;
height:350px;
background-color:f1f1f1;
padding-left: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
color:silver;
background: black;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
p {
float:left;
}
a {
text-decoration:none;
}
ul {
width:200px;
list-style-type: none;
padding:0px;
margin: 0px;
}
ul li a {
width: 200px;
height: 20px;
display:block;
text-decoration:none;
text-align: left;
font: bold 14px/20px Verdana;
color:#FFD700;
padding:5px;
margin: 5px auto;
cursor:pointer;
}
ul li a:hover {
width: 190px;
height: 20px;
text-decoration:none;
font: bold 12px/20px Verdana;
color:#ff0000;
cursor:pointer;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-93342980-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="header">
<h1>ANTIGÜEDADES HOOCK</h1>
<h2>Arte Oriental - Arte Etnica - Budismo - Antigüedades</h2>
</div>
<div class="topnav">
<a href="avisolegal.html" target="blank">Aviso Legal</a>
<a href="contacto.html" target="blank">contacto</a>
<a href="buyandshipping.html" target="blank">Compra & Envio</a>
<a href="hoockantiques.html" style="float:right"><img src="imag/english_flag.JPG" alt="English" style="width:30px;height:15px; border: none;"/></a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<div align="left" id="menu">
<ul>
<li><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>
<li><a href="arte_oriental/arte_oriental.html" target="blank">ARTE ORIENTAL</a></li>
<li><a href="joyas_etnicas/joyas_etnicas.html" target="blank">ARTE ETNICA & JOYAS</a></li>
<li><a href="botellasrape/botellasrape.html" target="blank">BOTELLAS DE RAPE</a></li>
<li><a href="bronce/bronce.html" target="blank">BRONCE</a></li>
<li><a href="porcelana_china/porcelana_china.html" target="blank">PORCELANA CHINA</a></li>
<li><a href="ceramica_oriental/ceramica_oriental.html" target="blank">CERAMICA ORIENTAL</a></li>
<li><a href="jade/jade.html" target="blank">JADE & PIEDRAS</a></li>
<li><a href="muebles/muebles.htm" target="blank">MUEBLES Y PEANAS</a></li>
<li><a href="otro/otro.html" target="blank">OTROS OBJETOS</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
</div>
<div class="footer">
<h4>Gracias por visitar nuestra pagina web - © 2017 - 19 - ANTIGÜEDADES HOOCK</h4>
</div>
</body>
</html>
