Jump to content
Please Use CODE Tags

Need Help Alligning Divs

ShenaniganCoder
By ShenaniganCoder
in Programming
 Share
Posted

Hi, I need some help aligning these divs with each other because it looks really weird at the moment. 

<!--This is the HTML-->
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="brucetelecomv2.css">
</head>
<body>
<!--My trusty table to make centering easier-->
<table>	
	<tr><td>
		<div id="header">
		<a href="http://www.brucetelecom.com/index.php">
			<img src="http://www.brucetelecom.com/images/brucetelecom_logo.png" title="Home"/>
		</a>
		<a href="http://www.brucetelecom.com/homephone.php">
			<img src="http://www.brucetelecom.com/images/nav1_home.png" title="Home Phone" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_home_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_home.png'"/>
		</a>
		<a href="">
			<img src="http://www.brucetelecom.com/images/nav1_tv.png" title="Digital TV" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_tv_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_tv.png'"/>
		</a>
		<a href="">
			<img src="http://www.brucetelecom.com/images/nav1_internet.png" title="Internet" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_internet_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_internet.png'"/>
		</a>
		<a href="">
			<img src="http://www.brucetelecom.com/images/nav1_wireless.png" title="Wireless" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_wireless_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_wireless.png'"/>
		</a>
		<a href="">
			<img src="http://www.brucetelecom.com/images/nav1_bundle2.png" title="Bundle Promotions" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_bundle2_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_bundle2.png'"/>
		</a>
		<a href="">
			<img src="http://www.brucetelecom.com/images/nav1_business_new.png" title="Business Support" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_business_new_over.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_business_new.png'"/>
		</a>
		</div>
		<div id="picture">
		<img src="http://www.brucetelecom.com/images/Header-Careers.jpg"/>
		</div>
		<div id="sidebar">
			<ul>
				<li><a href='http://www.brucetelecom.com/aboutus.php'>
					<img src="http://www.brucetelecom.com/images/nav2_about.png" title="About Us" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_about_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_about.png'" />
				</a></li>
				<li><a href="http://www.brucetelecom.com/news.php">
					<img src="http://www.brucetelecom.com/images/nav3_news.png" title="News" onmouseover="this.src='http://www.brucetelecom.com/images/nav3_news_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav3_news.png'" />
				</a></li>
				<li><a href='http://www.brucetelecom.com/support.php'>
					<img src="http://www.brucetelecom.com/images/nav2_support.png" title="For Business" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_support_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_support.png'" />
				</a></li>
				<li><a href="http://www.brucetelecom.com/contactus.php">
					<img src="http://www.brucetelecom.com/images/nav2_contactus.png" title="Contact Us" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_contactus_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_contactus.png'" />
					</a></li>
				<li><a href="https://webmail.bmts.com">
					<img src="http://www.brucetelecom.com/images/nav2_webmail.png" title="Webmail" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_webmail_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_webmail.png'" />
					</a></li>
				<li><a href="https://brucetelecom.smarthub.coop">
					<img src="http://www.brucetelecom.com/images/nav2_ebillingovr.png" title="E-Billing" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_ebilling.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_ebillingovr.png'" />
				</a></li>
				<li style="display:inline;"><a href="https://www.facebook.com/brucetelecom">
					<img src="http://www.brucetelecom.com/images/facebook.png" title="Our Facebook" />
					</a></li>
				<li style="display:inline;"><a href="https://twitter.com/brucetelecom">
					<img src="http://www.brucetelecom.com/images/twitter.png" title="Our Twitter" />
					</a></li>
				<li style="display:inline;"><a href="https://www.youtube.com/channel/UCmNxyLUGOi_vUIzf7SfzwEQ" />
					<img src="http://www.brucetelecom.com/images/youtube.png" title="Our YouTube"/>
					</a></li>
			</ul>
		</div>
	</tr></td>
/*This is the CSS*/
a:link {
	text-decoration: none;
}
#sidebar {
	float: left;
}
ul {
	list-style:none;
	font-size: 0;
}
#picture {
	float: right;
}
#header {
	padding: 0;
	margin: 0;
}

 

Untitled23.png

Link to comment
https://linustechtips.com/topic/610604-need-help-alligning-divs/
Share on other sites
Link to post
Share on other sites
Posted
  • Author
7 hours ago, ddddanil said:

put all your links and pics in table. They never let you down.

I have it in a table but I'm not really good at making websites using tables, I mostly just made 1 tr and 1 td and just put everything else in divs

 

Link to comment
https://linustechtips.com/topic/610604-need-help-alligning-divs/#findComment-7898929
Share on other sites
Link to post
Share on other sites
Posted

how about using boot strap?

  

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Heading</h1>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">
    <a href="">Link 1</a><br>
    <a href="">Link 2</a><br>
    <a href="">Link 3</a><br>
    <a href="">Link 4</a><br>
    </div>
    <div class="col-sm-8" style="background-color:lavenderblush;">main content</div>
  </div>
</div>
    
</body>
</html>

 

Screenshot 2016-06-14 at 15.58.36.png

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
https://linustechtips.com/topic/610604-need-help-alligning-divs/#findComment-7902014
Share on other sites
Link to post
Share on other sites
Posted
12 hours ago, ShenaniganCoder said:

I now have a new problem. This happened while I was putting some line breaks into my code. I also got the extra white space thing solved.

 

if you're using tables for layout it's no wonder you're having problems. I suggest bootstrap not because I am messing with but because it's a very good framework that allows you to do this sort of stuff quickly.

just did this in about 15 mins, it's almost the same as yours, minus the left navigation is moved to the left like in your first post. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container" style="width: 90%;">
	<div class="row">
		<div class="col-sm-2">
			<img src="http://www.brucetelecom.com/images/brucetelecom_logo.png">
		</div>
		<div class="col-sm-10">
			<table>
				<tr>
					<td>
						<a href="http://www.brucetelecom.com/homephone.php">
							<img src="http://www.brucetelecom.com/images/nav1_home.png" title="Home Phone" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_home_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_home.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_tv.png" title="Digital TV" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_tv_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_tv.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_internet.png" title="Internet" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_internet_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_internet.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_wireless.png" title="Wireless" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_wireless_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_wireless.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_bundle2.png" title="Bundle Promotions" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_bundle2_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_bundle2.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_business_new.png" title="Business Support" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_business_new_over.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_business_new.png'"/>
						</a>
					</td>
				</tr>
			</table>
		</div>
	</div>
  	<div class="row">
    	<div class="col-sm-2">
    		<ul style="list-style: none;">
				<li>
					<a href='http://www.brucetelecom.com/aboutus.php'>
						<img src="http://www.brucetelecom.com/images/nav2_about.png" title="About Us" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_about_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_about.png'" />
					</a>
				</li>
				<li>
					<a href="http://www.brucetelecom.com/news.php">
						<img src="http://www.brucetelecom.com/images/nav3_news.png" title="News" onmouseover="this.src='http://www.brucetelecom.com/images/nav3_news_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav3_news.png'" />
					</a>
				</li>
				<li>
					<a href='http://www.brucetelecom.com/support.php'>
						<img src="http://www.brucetelecom.com/images/nav2_support.png" title="For Business" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_support_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_support.png'" />
					</a>
				</li>
				<li>
					<a href="http://www.brucetelecom.com/contactus.php">
						<img src="http://www.brucetelecom.com/images/nav2_contactus.png" title="Contact Us" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_contactus_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_contactus.png'" />
					</a>
				</li>
				<li>
					<a href="https://webmail.bmts.com">
						<img src="http://www.brucetelecom.com/images/nav2_webmail.png" title="Webmail" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_webmail_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_webmail.png'" />
					</a>
				</li>
				<li>
					<a href="https://brucetelecom.smarthub.coop">
						<img src="http://www.brucetelecom.com/images/nav2_ebillingovr.png" title="E-Billing" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_ebilling.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_ebillingovr.png'" />
					</a>
				</li>
				<li style="display:inline;">
					<a href="https://www.facebook.com/brucetelecom">
						<img src="http://www.brucetelecom.com/images/facebook.png" title="Our Facebook" />
					</a>
				</li>
				<li style="display:inline;">
					<a href="https://twitter.com/brucetelecom">
						<img src="http://www.brucetelecom.com/images/twitter.png" title="Our Twitter" />
					</a>
				</li>
				<li style="display:inline;">
					<a href="https://www.youtube.com/channel/UCmNxyLUGOi_vUIzf7SfzwEQ" >
						<img src="http://www.brucetelecom.com/images/youtube.png" title="Our YouTube"/>
					</a>
				</li>
			</ul>
    	</div>
		<div class="col-sm-10">
			<h3>Careers</h3>
			<p>
				doesn't<br> matter<br> how many breaks you use when you set <br> up your layout correctly.
			</p>
		</div>
  </div>
</div>
    
</body>
</html>

 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
https://linustechtips.com/topic/610604-need-help-alligning-divs/#findComment-7906078
Share on other sites
Link to post
Share on other sites
Posted
  • Author
11 hours ago, vorticalbox said:

if you're using tables for layout it's no wonder you're having problems. I suggest bootstrap not because I am messing with but because it's a very good framework that allows you to do this sort of stuff quickly.

just did this in about 15 mins, it's almost the same as yours, minus the left navigation is moved to the left like in your first post. 


<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container" style="width: 90%;">
	<div class="row">
		<div class="col-sm-2">
			<img src="http://www.brucetelecom.com/images/brucetelecom_logo.png">
		</div>
		<div class="col-sm-10">
			<table>
				<tr>
					<td>
						<a href="http://www.brucetelecom.com/homephone.php">
							<img src="http://www.brucetelecom.com/images/nav1_home.png" title="Home Phone" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_home_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_home.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_tv.png" title="Digital TV" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_tv_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_tv.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_internet.png" title="Internet" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_internet_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_internet.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_wireless.png" title="Wireless" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_wireless_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_wireless.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_bundle2.png" title="Bundle Promotions" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_bundle2_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_bundle2.png'"/>
						</a>
					</td>
					<td>
						<a href="">
							<img src="http://www.brucetelecom.com/images/nav1_business_new.png" title="Business Support" onmouseover="this.src='http://www.brucetelecom.com/images/nav1_business_new_over.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav1_business_new.png'"/>
						</a>
					</td>
				</tr>
			</table>
		</div>
	</div>
  	<div class="row">
    	<div class="col-sm-2">
    		<ul style="list-style: none;">
				<li>
					<a href='http://www.brucetelecom.com/aboutus.php'>
						<img src="http://www.brucetelecom.com/images/nav2_about.png" title="About Us" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_about_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_about.png'" />
					</a>
				</li>
				<li>
					<a href="http://www.brucetelecom.com/news.php">
						<img src="http://www.brucetelecom.com/images/nav3_news.png" title="News" onmouseover="this.src='http://www.brucetelecom.com/images/nav3_news_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav3_news.png'" />
					</a>
				</li>
				<li>
					<a href='http://www.brucetelecom.com/support.php'>
						<img src="http://www.brucetelecom.com/images/nav2_support.png" title="For Business" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_support_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_support.png'" />
					</a>
				</li>
				<li>
					<a href="http://www.brucetelecom.com/contactus.php">
						<img src="http://www.brucetelecom.com/images/nav2_contactus.png" title="Contact Us" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_contactus_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_contactus.png'" />
					</a>
				</li>
				<li>
					<a href="https://webmail.bmts.com">
						<img src="http://www.brucetelecom.com/images/nav2_webmail.png" title="Webmail" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_webmail_ovr.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_webmail.png'" />
					</a>
				</li>
				<li>
					<a href="https://brucetelecom.smarthub.coop">
						<img src="http://www.brucetelecom.com/images/nav2_ebillingovr.png" title="E-Billing" onmouseover="this.src='http://www.brucetelecom.com/images/nav2_ebilling.png'" onmouseout="this.src='http://www.brucetelecom.com/images/nav2_ebillingovr.png'" />
					</a>
				</li>
				<li style="display:inline;">
					<a href="https://www.facebook.com/brucetelecom">
						<img src="http://www.brucetelecom.com/images/facebook.png" title="Our Facebook" />
					</a>
				</li>
				<li style="display:inline;">
					<a href="https://twitter.com/brucetelecom">
						<img src="http://www.brucetelecom.com/images/twitter.png" title="Our Twitter" />
					</a>
				</li>
				<li style="display:inline;">
					<a href="https://www.youtube.com/channel/UCmNxyLUGOi_vUIzf7SfzwEQ" >
						<img src="http://www.brucetelecom.com/images/youtube.png" title="Our YouTube"/>
					</a>
				</li>
			</ul>
    	</div>
		<div class="col-sm-10">
			<h3>Careers</h3>
			<p>
				doesn't<br> matter<br> how many breaks you use when you set <br> up your layout correctly.
			</p>
		</div>
  </div>
</div>
    
</body>
</html>

 

Well that worked, Thanks for that, but now I need to put the sidebar back where it belongs and float: left isn't doing that, because the width is 840px. bootstrap is also making it difficult for me to fix my site.

EDIT: I fixed my website, didn't use your code though, sorry for wasting your 15 min xD

 

 

 

Link to comment
https://linustechtips.com/topic/610604-need-help-alligning-divs/#findComment-7908374
Share on other sites
Link to post
Share on other sites
Posted
1 hour ago, ShenaniganCoder said:

Well that worked, Thanks for that, but now I need to put the sidebar back where it belongs and float: left isn't doing that, because the width is 840px. bootstrap is also making it difficult for me to fix my site.

EDIT: I fixed my website, didn't use your code though, sorry for wasting your 15 min xD

 

 

 

no biggy. You really should check out bootstrap.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
https://linustechtips.com/topic/610604-need-help-alligning-divs/#findComment-7908896
Share on other sites
Link to post
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
Go to topic listing Programming

×