• Advertisement
Sign in to follow this  

HTML Spacing

This topic is 880 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

<!DOCTYPE html>

 

Ok, I'm starting to pull my hair out with this one, and really could use some guidance. I am trying get the Twitter feed on the right hand side (which I did), and I managed to get the articles in the middle to not overlap it. The top 2 articles have shifted over to make room for the Feed, but now the remaining articles won't shift, so everything is no longer in a nice "column". 

 

Is there a trick to this spacing issue? 

 

Also, please let me know if the code is not showing in the post. 

Edited by cavendert

Share this post


Link to post
Share on other sites
Advertisement
<!DOCTYPE html>
<html>
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style>
.map{
height:150px;
width:150px;
border-radius:50%;
background-image:url('../Images/Map2.jpg');
background-size:cover;
float:right;
margin:0px 0px 10px 0px;
}
.clock{
height:150px;
width:150px;
border-radius:50%;
background-image:url('../Images/clock.JPG');
background-size:cover;
float:inherit;
margin:0px 0px 10px 0px;
}
.left{
float:left;
text-align:center;
}
.right{
float:right;
margin-top:5px;
 
 
}
.bottom{
padding: 0px 0px 0px 600px;
float: none;
}
#left_bar {
height:60px;
width:60px;
}
article{
position:relative;
}
body{
background-color:beige;
}
header{
text-align:center;
font-size:50px;
background-color:black;
color:red;
}
footer{
text-align:center;
}
article{
text-align:center;
 
 
}
table{
padding:10px 0px 10px 0px;
}
td{
height:60px;
width:60px;
border:2px black solid;
 
}
</style>
</head>
 
<body>
<header>MiniMap</header>
<div class="map"></div>
<div class="clock"></div>
<div class="left">
<table>
<tr>
<td><a href="http://www.battle.net"><img src="../Images/Right Bar/Home.png" id="left_bar"/></a></td>
</tr>
</table>
<table>
<tr>
<td><a href="http://kotaku.com"><img src="../Images/Right Bar/Articles.png" id="left_bar"/></a></td>
</tr>
</table>
<table>
<tr>
<td><a href="http://www.youtube.com"><img src="../Images/Right Bar/Video.png" id="left_bar"/></a></td>
</tr>
</table>
<table>
<tr>
<td><a href="http://www.openmatradio.com"><img src="../Images/Right Bar/Podcast.png" id="left_bar"/></a></td>
</tr>
</table>
<table>
<tr>
<td><a href="http://www.yellowpages.com"><img src="../Images/Right Bar/Contact.png" id="left_bar"/></a></td>
</tr>
</table>
</div>
<div class="right">
<a class="twitter-timeline" href="https://twitter.com/SamerGhani" data-widget-id="668113160134647808">Tweets by @SamerGhani</a>
 
</div>
 
<div id="article1"><article>
Ark:<em>Survival Evolved</em> Mod Lets you play as Dinosaurs!</a></h1>
<p>When I was young, I always hoped against hope that I would grow up to be a dinosaur. This is probably as close as I’m going to get. FinntasticGames “Play as a dino” mod is exactly what it sounds like: it lets you be a dinosaur in Ark, a game about punching trees and pooping uncontrollably. Also dinosaurs. Given that people have been requesting this type of thing for ages, it’s almost surprising that it’s not an official game feature. Oh well, mods to the rescue.
</p>
</article>
</div>
<article>
<em>Bloodborne</em> used to wreck me. Now I"m wrecking <em>Bloodborne</em></a></h1>
<p>Once more unto the breach, dear hunters. Bloodborne’s DLC expansion hits next week, and while I can’t talk about The Old Hunters yet, its impending arrival prompted a return to From Software’s bloody action game. Specifically, I dove into New Game Plus mode. You know what? This game’s still frickin’ amazing. </p>
</article>
<article>
The Problem With The Newest Version of Superman</a></h1>
<p>2015 has been a hell of a year for the Man of Steel, bringing the biggest changes that the character’s seen in decades. And, while I mostly like how the current Superman reads after getting his powers reduced and secret identity outed, his monthly adventures feel like they’re losing steam to me.</p>
</article>
<article>
A Price of Games Journalism</a></h1>
<p>For the past two years, Kotaku has been blacklisted by Bethesda, the publisher of the Fallout and Elder Scrolls series. For the past year, we have also been, to a lesser degree, ostracized by Ubisoft, publisher of Assassin’s Creed, Far Cry and more. In those periods of time, the PR and marketing wings of those two gaming giants have chosen to act as if Kotaku doesn’t exist. They’ve cut off our access to their games and creators, omitted us from their widespread mailings of early review copies and, most galling, ignored all of our requests for comment on any news stories.</p>
</article>
<footer>
<div class="bottom">
<table>
<tr>
<td>Home</td>
<td>Videos</td>
<td>Articles</td>
<td>Podcasts</td>
<td>Contacts</td>
</tr>
</table>
</div>
</footer>
</body>
 
</html>

Share this post


Link to post
Share on other sites

Your articles are not aligned on the left side either...

It just happens that your "left" div is taller than your "right" div (the one with twitter). 

 

The problem is that you are aligning each "article" div separately. Just create a center div and put all of your "articles" in that.

Share this post


Link to post
Share on other sites

Ok, cool. I will be updating that shortly. Please forgive this "stupid question", but in that case, where I create a <div> that holds the articles, would I want to use a "float left", or is there a better option for spacing.........spacing is currently my Kryptonite

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement