Jump to content

Right Colum floating right?


Hoock
 Share

Recommended Posts

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>

<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 &amp; 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 &amp; 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 &amp; 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 - &copy; 2017 - 19 - ANTIG&Uuml;EDADES HOOCK</h4>

</div>

</body>

</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...