Columns in CSS/HTML with div

Question

I have some coding problems with the div section for my content and sidebar. As you can see on (link deleted > problem solved) I want the Copyright section under the Home section, and want to start the sidebar at the right side like this link: (link deleted > problem solved)

Do you know how I can do this?

.container {
	width:1000px;
	margin:0 auto;
}

.clearfix:after {
	content:"";
	display:table;
	clear:both;
}

#navbar {
	font-family:Ubuntu Condensed;
	font-size:16px;
	background-color:#ffff00;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1));
	height:44px;
	border-radius:4px 4px 0 0;
	margin-top:-44px;
	box-shadow:inset 0px -22px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -3px 0px 0px rgba(0,0,0,0.1),0px 0px 14px 0px rgba(0,0,0,0.5);
}

#navbar ul {
	margin:0;
	padding:12.5px 0 0 0;
}

#navbar ul li {
	list-style:none;
	display:inline;
	float:left;
}

#navbar ul .navright {
	float:right;
	position:relative;
}

#navbar ul li a {
	padding:13px 20px;
	box-shadow:1px 0px 0px 0px rgba(255,255,255,0.08),inset -1px 0px 0px 0px rgba(0,0,0,0.2);
	color:#000;
	text-shadow:0 1px #ffff00;
	text-decoration:none;
}

#navbar ul .navright a {
	box-shadow:-1px 0px 0px 0px rgba(255,255,255,0.08),inset 1px 0px 0px 0px rgba(0,0,0,0.2);
}

#navbar ul li a:hover {
	background-color:rgba(0,0,0,0.05);
	text-decoration:bold;
}

#navcollapse {
	display:none!important;
}

.open-dropmenu {
	display:block!important;
}

#nav-logo {
	background-image:url(img/logo.png);
	width:203px;
	height:77px;
	display:none;
	float:left;
	margin:-2px 0 0 10px;
}

.space {
	height: 20px;
}

#content {
	width:645px;
	background-color:#fff;
	border-radius:4px 4px 4px 4px;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
	padding:15px;
	float:left;
	margin-right:20px;
	margin-bottom:20px;
}

#sidebar {
	width:274px;
	background-color:#fff;
	border-radius:4px 4px 4px 4px;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
	padding:15px;
	float:right;
	margin-bottom:20px;
}

#footer {
	vertical-align: middle;
}

.side-heading {
	text-shadow:0 1px #ffff00;
	padding:5px 5px 7px 5px;
	margin:0px 0 5px 0;
	border-radius:3px;
	font-weight:normal;
	font-family:Ubuntu Condensed;
	font-size:16px;
	color:#000;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1));
	background-color:#ffff00;
	box-shadow:inset 0px -15px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -2px 0px 0px rgba(0,0,0,0.1);
}

.home-badges {
	width:275px;
	margin:0 auto;
}

.holder,.holder_hover {
	border-radius:4px;
	width:50px;
	height:50px;
	background-position:center;
	background-repeat:no-repeat;
	float:left;
	margin:2.5px;
	cursor:pointer;
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	background-color:#ebebeb;
}

.spinner {
	animation-name:rotate;
	animation-duration:10s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	position:absolute;
	width:55px;
	height:55px;
	background:url(img/spinner.png) no-repeat center;
	background-size:cover;
}

<div class="container">
	<div id="navbar">
		<a href="#" id="nav-logo"></a>
		<div id="navcollapse" style="font-size:16px">MENU</div>
		<ul id="mainnav">
		<li><a href="?page=">/</a></li>
		<li><a href="?page=">/</a></li>
		<li><a href="?page=">/</a></li>
		<li><a href="?page=">/</a></li>
		<li><a href="?page=">/</a></li>
		<li class="hide-small-screen"></li>
		<li class="navright"><a href="?page=login">Login</a></li>
		</ul>
	</div>
	
	<div class="space"></div>
	
		<div id="content">
			<div class="clearfix"></div>
				-
		</div>
		
		<div id="content" style="font-size:12px">
			<div class="clearfix"></div>
			© 2017
		</div>

		<div id="sidebar">
			<div class="side-heading">Nieuwste badges</div>
				<div class="box_inside">
				<div class="home-badges">
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC11.gif);"></div>
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC10.gif);"></div>
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC09.gif);"></div>
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC08.gif);"></div>
					<div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC07.gif);"></div>
				</div>
					<div style="clear:both;"></div>
				</div>
		</div>
		<div id="sidebar">
			<div class="side-heading">Nieuwste meubels</div>
				<div class="box_inside">
				<div class="home-badges">
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
					<a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
				</div>
					<div style="clear:both;"></div>
				</div>
		</div>
		
		<div id="sidebar">
			<div class="side-heading">Twitter</div>
				<div class="box_inside">
				<div class="home-badges">
				<a class="twitter-timeline" href="https://twitter.com/" data-tweet-limit="1" data-chrome="noheader nofooter noborders"></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
				</div>
					<div style="clear:both;"></div>
				</div>
					
		</div>
	<div class="clearfix"></div>
	
</div>

Wouldn't it be easy to make a copy of index.php, rename and change the contents if it is the same structure? (I see its the same structure) — Syfer
– Syfer, Commented Jun 2, 2017 at 1:00

Chris Happy · Accepted Answer · 2017-06-02 01:35:38Z

Add this code:

#mainleft {
  float: left;
}

#mainright {
  float: right;
}

remove the floats on #content & #sidebar, and wrap the #content with a #mainleft and the #sidebar with #mainright div.

/*Add this*/

#mainleft {
  float: left;
}

#mainright {
  float: right;
}

.container {
  width: 1000px;
  margin: 0 auto;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

#navbar {
  font-family: Ubuntu Condensed;
  font-size: 16px;
  background-color: #ffff00;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  height: 44px;
  border-radius: 4px 4px 0 0;
  margin-top: -44px;
  box-shadow: inset 0px -22px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -3px 0px 0px rgba(0, 0, 0, 0.1), 0px 0px 14px 0px rgba(0, 0, 0, 0.5);
}

#navbar ul {
  margin: 0;
  padding: 12.5px 0 0 0;
}

#navbar ul li {
  list-style: none;
  display: inline;
  float: left;
}

#navbar ul .navright {
  float: right;
  position: relative;
}

#navbar ul li a {
  padding: 13px 20px;
  box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.08), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.2);
  color: #000;
  text-shadow: 0 1px #ffff00;
  text-decoration: none;
}

#navbar ul .navright a {
  box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.08), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.2);
}

#navbar ul li a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  text-decoration: bold;
}

#navcollapse {
  display: none!important;
}

.open-dropmenu {
  display: block!important;
}

#nav-logo {
  background-image: url(img/logo.png);
  width: 203px;
  height: 77px;
  display: none;
  float: left;
  margin: -2px 0 0 10px;
}

.space {
  height: 20px;
}

#content {
  width: 645px;
  background-color: #fff;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  /*float:left; remove this */
  margin-right: 20px;
  margin-bottom: 20px;
}

#sidebar {
  width: 274px;
  background-color: #fff;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  /*float:right; remove this */
  margin-bottom: 20px;
}

#footer {
  vertical-align: middle;
}

.side-heading {
  text-shadow: 0 1px #ffff00;
  padding: 5px 5px 7px 5px;
  margin: 0px 0 5px 0;
  border-radius: 3px;
  font-weight: normal;
  font-family: Ubuntu Condensed;
  font-size: 16px;
  color: #000;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  background-color: #ffff00;
  box-shadow: inset 0px -15px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
}

.home-badges {
  width: 275px;
  margin: 0 auto;
}

.holder,
.holder_hover {
  border-radius: 4px;
  width: 50px;
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  float: left;
  margin: 2.5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  background-color: #ebebeb;
}

.spinner {
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: absolute;
  width: 55px;
  height: 55px;
  background: url(img/spinner.png) no-repeat center;
  background-size: cover;
}

<div class="container">
  <div id="navbar">
    <a href="#" id="nav-logo"></a>
    <div id="navcollapse" style="font-size:16px">MENU</div>
    <ul id="mainnav">
      <li><a href="?page=home">Home</a></li>
      <li><a href="?page=nieuws">Nieuws</a></li>
      <li><a href="?page=habbo">Habbo</a></li>
      <li><a href="?page=intrahabbo">IntraHabbo</a></li>
      <li><a href="?page=fancenter">Fancenter</a></li>
      <li class="hide-small-screen"></li>
      <li class="navright"><a href="?page=login">Login</a></li>
    </ul>
  </div>

  <div class="space"></div>
  <div id="mainleft">
    <div id="content">
      <div class="clearfix"></div>
      <?php
					if (!empty($_GET['page']))
				{
					if (file_exists('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php'))
				{
					include('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php');
				}
				else
				{
					include('http://www.habbo.iamcolin.nl/pages/404.php');
				}
				}
				else
				{
					include('pages/home.php');
				}
				?>
    </div>

    <div id="content" style="font-size:12px">
      <div class="clearfix"></div>
      <b>© 2017 IntraHabbo</b><br> IntraHabbo is niet verbonden aan, aanbevolen, gesponsord of specifiek goedgekeurd door Sulake Corporation Oy of aan zijn gelieerde ondernemingen. IntraHabbo kan gebruik maken van handelsmerken en andere intellectuele
      eigendommen van Habbo, zoals toegestaan volgens het Habbo Fansitebeleid.
    </div>
  </div>
  <div id="mainright">
    <div id="sidebar">
      <div class="side-heading">Nieuwste badges</div>
      <div class="box_inside">
        <div class="home-badges">
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC11.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC10.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC09.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC08.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC07.gif);"></div>
        </div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div id="sidebar">
      <div class="side-heading">Nieuwste meubels</div>
      <div class="box_inside">
        <div class="home-badges">
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
          <a href="#">
            <div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div>
          </a>
        </div>
        <div style="clear:both;"></div>
      </div>
    </div>

    <div id="sidebar">
      <div class="side-heading">Twitter</div>
      <div class="box_inside">
        <div class="home-badges">
          <a class="twitter-timeline" href="https://twitter.com/intrahabbo" data-tweet-limit="1" data-chrome="noheader nofooter noborders"></a>
          <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
        <div style="clear:both;"></div>
      </div>

    </div>
  </div>
  <div class="clearfix"></div>

</div>

j-printemps · Accepted Answer · 2017-06-02 02:29:40Z

First, remember that anid should be unique, useclass instead. Then, you can add html5 tags such as <main> holding your main content, and <aside> for your sidebar, it gives some structure in your markup, which is good for accessibility.

You can have a look of how I tweaked your code :

.container {
	width:1000px;
	margin:0 auto;
}

.clearfix:after {
	content:"";
	display:table;
	clear:both;
}

#navbar {
	font-family:Ubuntu Condensed;
	font-size:16px;
	background-color:#ffff00;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1));
	height:44px;
	border-radius:4px 4px 0 0;
	margin-top:-44px;
	box-shadow:inset 0px -22px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -3px 0px 0px rgba(0,0,0,0.1),0px 0px 14px 0px rgba(0,0,0,0.5);
}

#navbar ul {
	margin:0;
	padding:12.5px 0 0 0;
}

#navbar ul li {
	list-style:none;
	display:inline;
	float:left;
}

#navbar ul .navright {
	float:right;
	position:relative;
}

#navbar ul li a {
	padding:13px 20px;
	box-shadow:1px 0px 0px 0px rgba(255,255,255,0.08),inset -1px 0px 0px 0px rgba(0,0,0,0.2);
	color:#000;
	text-shadow:0 1px #ffff00;
	text-decoration:none;
}

#navbar ul .navright a {
	box-shadow:-1px 0px 0px 0px rgba(255,255,255,0.08),inset 1px 0px 0px 0px rgba(0,0,0,0.2);
}

#navbar ul li a:hover {
	background-color:rgba(0,0,0,0.05);
	text-decoration:bold;
}

#navcollapse {
	display:none!important;
}

.open-dropmenu {
	display:block!important;
}

#nav-logo {
	background-image:url(img/logo.png);
	width:203px;
	height:77px;
	display:none;
	float:left;
	margin:-2px 0 0 10px;
}

.space {
	height: 20px;
}


.main {
  width:645px;
  float:left;
  margin-right:20px;
}

.aside {
  width:274px;
  float:right;
}

.content {
	background-color:#fff;
	border-radius:4px 4px 4px 4px;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
	padding:15px;
  margin-bottom:20px;
}

.sidebar {
	width:274px;
	background-color:#fff;
	border-radius:4px 4px 4px 4px;
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
	padding:15px;
	margin-bottom:20px;
}

#footer {
	vertical-align: middle;
}

.side-heading {
	text-shadow:0 1px #ffff00;
	padding:5px 5px 7px 5px;
	margin:0px 0 5px 0;
	border-radius:3px;
	font-weight:normal;
	font-family:Ubuntu Condensed;
	font-size:16px;
	color:#000;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.1));
	background-color:#ffff00;
	box-shadow:inset 0px -15px 0px 0px rgba(0,0,0,0.05),inset 0px 2px 0px 0px rgba(255,255,255,0.1),inset 0px -2px 0px 0px rgba(0,0,0,0.1);
}

.home-badges {
	width:275px;
	margin:0 auto;
}

.holder,.holder_hover {
	border-radius:4px;
	width:50px;
	height:50px;
	background-position:center;
	background-repeat:no-repeat;
	float:left;
	margin:2.5px;
	cursor:pointer;
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	background-color:#ebebeb;
}

.spinner {
	animation-name:rotate;
	animation-duration:10s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	position:absolute;
	width:55px;
	height:55px;
	background:url(img/spinner.png) no-repeat center;
	background-size:cover;
}

<div class="container">
	<div id="navbar">
		<a href="#" id="nav-logo"></a>
		<div id="navcollapse" style="font-size:16px">MENU</div>
		<ul id="mainnav">
  		<li><a href="?page=home">Home</a></li>
  		<li><a href="?page=nieuws">Nieuws</a></li>
  		<li><a href="?page=habbo">Habbo</a></li>
  		<li><a href="?page=intrahabbo">IntraHabbo</a></li>
  		<li><a href="?page=fancenter">Fancenter</a></li>
  		<li class="hide-small-screen"></li>
  		<li class="navright"><a href="?page=login">Login</a></li>
		</ul>
	</div>
	
	<div class="space"></div>

  <main class="main">
		<div class="content">
			<div class="clearfix"></div>
				<?php
					if (!empty($_GET['page']))
				{
					if (file_exists('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php'))
				{
					include('http://www.habbo.iamcolin.nl/pages/'.$_GET['page'].'.php');
				}
				else
				{
					include('http://www.habbo.iamcolin.nl/pages/404.php');
				}
				}
				else
				{
					include('pages/home.php');
				}
				?>
		</div>
		
		<div class="content" style="font-size:12px">
			<div class="clearfix"></div>
			<b>© 2017 IntraHabbo</b><br>
			IntraHabbo is niet verbonden aan, aanbevolen, gesponsord of specifiek goedgekeurd door Sulake Corporation Oy of aan zijn gelieerde ondernemingen. IntraHabbo kan gebruik maken van handelsmerken en andere intellectuele eigendommen van Habbo, zoals toegestaan volgens het Habbo Fansitebeleid.
		</div>
  </main>

  <aside class="aside">
    <div class="sidebar">
      <div class="side-heading">Nieuwste badges</div>
        <div class="box_inside">
        <div class="home-badges">
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC11.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC10.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC09.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC08.gif);"></div>
          <div class="holder tooltip tooltipstered" style="background-image:url(https://habboo-a.akamaihd.net/c_images/album1584/SPC07.gif);"></div>
        </div>
          <div style="clear:both;"></div>
        </div>
    </div>
    <div class="sidebar">
      <div class="side-heading">Nieuwste meubels</div>
        <div class="box_inside">
        <div class="home-badges">
          <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
          <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
          <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
          <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
          <a href="#"><div class="holder tooltip tooltipstered" id="" style="background-image:url();"></div></a>
        </div>
          <div style="clear:both;"></div>
        </div>
    </div>
    
    <div class="sidebar">
      <div class="side-heading">Twitter</div>
        <div class="box_inside">
        <div class="home-badges">
        <a class="twitter-timeline" href="https://twitter.com/intrahabbo" data-tweet-limit="1" data-chrome="noheader nofooter noborders"></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
          <div style="clear:both;"></div>
        </div>
    </div>
  </aside>
	
</div>

Collectives™ on Stack Overflow

Columns in CSS/HTML with div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related