Right Colum floating right?

Hoock · January 19, 2019

Hi.

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 erased the other colums on the example, maybe that interferes with the final result. But I onle need two colums and the footer.

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>

(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>

<h1>ANTIGÜEDADES HOOCK</h1>

<h2>Arte Oriental - Arte Etnica - Budismo - Antigüedades</h2>

</div>

<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>

</div>

<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>

<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>

</body>

</html>

Sign In

Right Colum floating right?

Recommended Posts

Hoock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity