HTML Spacing

Started by
3 comments, last by cavendert 8 years, 4 months ago

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

Advertisement


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

The code is not showing in the post.

Hello to all my stalkers.

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

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.

My Oculus Rift Game: RaiderV

My Android VR games: Time-Rider& Dozer Driver

My browser game: Vitrage - A game of stained glass

My android games : Enemies of the Crown & Killer Bees

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

This topic is closed to new replies.

Advertisement