Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Right Column Pushed Down - Help!

janglo465
in Frontend

Featured Replies

Hey guys,

 

My site has a news column on the right hand side of the page. The title, "news," displays fine at the top of the column. However, all of the news entries are only displayed at the bottom, after the content of the left-side column ends.

 

I'm just getting into web design, using templates and site builders for assistance, and would really appreciate any help. The news column is indicated in the HTML code as <div id="sidebar">.

 

Thanks in advance!

 

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="{%MetaCharset%}"/>
<meta name="description" content="{%MetaDescription%}"/>
<meta name="keywords" content="{%MetaKeywords%}"/> 
<title>{%MetaTitle%}</title>

<link href="images/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="header">
<h1 class="Logo"><a href="index.php">{%WebsiteName%}</a><span>{%WebsiteSlogan%}</span></h1>
<div id="menu">
<ul>
{%menu_start=1%}
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
{%menu_end=1%} 
</ul>
</div>
</div>
<div id="contents">
<div id="main">
<h1><img src="web_images/banner_2_.png" height="80" width="480" /></h1>
<p>{%content%}</p>
</div>
<div id="sidebar">
<h2>News</h2>
<br />{%news%}</div>
<div class="clear"></div>
</div>
<div id="bottom">{%WebsiteFooter%}</div>
<div id="footer"></div>
</div>
</body>
</html>

 

CSS:

 

@charset "utf-8";
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(bg.png);
background-repeat: repeat-x;
background-color: #414E07;
margin: 0px;
padding: 0px;
}
#wrap {
width: 812px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-size: 12px;
}
#wrap #header #menu {
padding-top: 50px;
font-size: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: uppercase;
padding-left: 50px;
padding-right: 50px;
}
#wrap #header #menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#wrap #header #menu li {
display: inline;
}
#wrap #header #menu a {
display: block;
float: left;
margin-right: 5px;
margin-left: 5px;
padding-right: 5px;
padding-left: 5px;
height: 37px;
padding-top: 25px;
color: #135C6C;
text-decoration: none;
}

#wrap #header {
background-image: url(header.png);
background-repeat: no-repeat;
height: 195px;
}
#wrap #contents {
background-image: url(content.png);
background-repeat: repeat-y;
background-position: center top;
padding-left: 50px;
padding-right: 50px;
margin: 0px;
padding-top: 15px;
padding-bottom: 15px;
}
#wrap p {
margin-top: 0px;
}
#wrap #header .Logo {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 25px;
color: #FFFFFF;
padding-top: 38px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 35px;
}
#wrap #contents #main h1 {
font-size: 22px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #758822;
}
#wrap #contents #main h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
color: #3B4706;
}

#wrap #contents #main .seo {
font-size: 11px;
display: block;
color: #000000;
background-color: #FFFFFF;
}
#wrap #contents #main h1 a {
color: #758822;
text-decoration: none;
}
#wrap #contents #main blockquote {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #414E07;
background-color: #FFFFFF;
padding: 5px;
margin: 15px;
}
#wrap #contents #main cite {
display: block;
font-size: 18px;
margin-top: 10px;
margin-bottom: 5px;
font-weight: normal;
color: #414E07;
}

#wrap #contents #main h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: normal;
color: #000000;
}


#wrap #bottom {
background-image: url(bottom.png);
background-repeat: repeat-y;
padding-top: 15px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
margin: 0px;
font-size: 10px;
}
#wrap #footer {
background-image: url(footer.png);
background-repeat: no-repeat;
height: 25px;
padding-top: 75px;
padding-left: 50px;
color: #758822;
font-size: 10px;
}
#wrap #footer a {
color: #B3C84F;
}
#wrap #bottom a {
color: #000000;
}


#wrap #header .Logo span {
font-size: 12px;
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #999900;
}
#wrap #header #menu a:visited, active {
display: block;
float: left;
margin-right: 5px;
margin-left: 5px;
padding-right: 5px;
padding-left: 5px;
height: 37px;
padding-top: 25px;
color: #135C6C;
text-decoration: none;
}
#wrap #header #menu a:hover {
display: block;
float: left;
margin-right: 5px;
margin-left: 5px;
padding-right: 5px;
padding-left: 5px;
height: 37px;
padding-top: 25px;
color: #EFEFEF;
text-decoration: none;
background-image: url(menuhvr.png);
background-repeat: no-repeat;
background-position: center bottom;
}
#wrap #header #menu .active a {
display: block;
float: left;
margin-right: 5px;
margin-left: 5px;
padding-right: 5px;
padding-left: 5px;
height: 37px;
padding-top: 25px;
color: #EFEFEF;
text-decoration: none;
background-image: url(menuhvr.png);
background-repeat: no-repeat;
background-position: center bottom;
}
#wrap #header #menu .active a:visited, active {
display: block;
float: left;
margin-right: 5px;
margin-left: 5px;
padding-right: 5px;
padding-left: 5px;
height: 37px;
padding-top: 25px;
color: #EFEFEF;
text-decoration: none;
background-image: url(menuhvr.png);
background-repeat: no-repeat;
background-position: center bottom;
}
#wrap #contents #main {
width: 495px;
float: left;
color: #666666;
}
#wrap #contents #main ul {
list-style-type: circle;
}
#wrap #contents #main li {
margin-bottom: 5px;
}

#wrap #contents #sidebar {
margin-left: 515px;
}
#wrap #contents .clear {
clear: both;
}
#wrap #contents #main p {
line-height: 20px;
color: #666666;
text-align: justify;
}
#wrap #contents #main a {
color: #758822;
}
#wrap #contents #main a:visited, active {
color: #000000;
}
#wrap #contents #main a:hover {
color: #758822;
text-decoration: none;
background-color: #FFFFFF;
}
#wrap #contents #main .align_left {
padding: 5px;
background-color: #B3C84F;
border: 1px solid #414E07;
float: left;
margin-right: 15px;
}
#wrap #contents #main .align_right {
padding: 5px;
background-color: #B3C84F;
border: 1px solid #414E07;
float: right;
margin-left: 15px;
}
#wrap #footer a:visited, active, hover {
color: #B3C84F;
}
#wrap #bottom a:visited, active {
color: #666666;
}
#wrap #contents #sidebar ul {
list-style-type: none;
margin: 0px;
padding: 5px;
background-color: #F1FBDD;
}
#wrap #contents #sidebar li {
padding: 3px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #B3C84F;
background-color: #E9F9C8;
}
#wrap #contents #sidebar h2 {
margin: 0px;
padding: 5px;
font-size: 18px;
color: #414E07;
background-color: #F1FBDD;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
text-transform: uppercase;
}
#wrap #header .Logo a {
color: #FFFFFF;
text-decoration: none;
}

#wrap #contents #sidebar a {
color: #666666;
text-decoration: none;
}
#wrap #contents #sidebar a:visited, active {
color: #666666;
text-decoration: none;
}
#wrap #contents #sidebar a:hover {
color: #000000;
text-decoration: underline;
}
#wrap #header .Logo a:visited, active, hover {
color: #FFFFFF;
text-decoration: none;
}

I can't see the problem in IE7 or Firefox. I added some content to the sidebar and it all showed just under the News heading:-

<div id="sidebar">
<h2>News</h2>
<br />{%news%}<p>News items</p>
<p>News items</p>
<p>News items</p>
</div>

Edited by Wickham

  • Author

I can't see the problem in IE7 or Firefox. I added some content to the sidebar and it all showed just under the News heading:-

<div id="sidebar">
<h2>News</h2>
<br />{%news%}<p>News items</p>
<p>News items</p>
<p>News items</p>
</div>

 

Thanks for your response. You are correct, text added to the column displays fine. However, {%news%} denotes a module from which it acquires the information, and that information gets pushed down and begins only where the left column ends. Again, I'm new to this, so I hope what I'm saying is clear!

OK, that's probably beyond my capabilities. We need to know what the module is and the code as the cure is probably in there as the html markup seems OK.

  • Author

OK, that's probably beyond my capabilities. We need to know what the module is and the code as the cure is probably in there as the html markup seems OK.

 

Well, now knowing that the HTML is fine, I suppose I'll just add text and dispose of the module. Thanks for your help!

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.