Fabio Viola Fabio Viola - 13 days ago 6
CSS Question

I forgot the right column during my design. It is possibile to add a right column?

Good morning and happy Saturday to everyone,

Nothing wrong with my page, but I just realized that I made a mistake to create just a main content column. I do need to column for the main content. Left column dedicated to the main content and a right column dedicate to other small stuff, such as banner, and other div.

The right column width has to accomodate an ads banner of width 336px. just to give you a sense of how width the right column must be.

How do I achieve this?

Thank you so much for your help.

Below is my current css code:

<style>

.navmenu {
background-color: #FFFFFF;
}

.navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
}

.navmenu li:last-child {
margin-left: auto;
}

.navmenu ul li a {
text-decoration: none;
margin: 4px;
padding: 5px 20px 5px 20px;
color: #FFFFFF;
background: #4285F4;
display: inline-block;
}

.main-content {
padding: 5px 20px 5px 20px;
line-height: 18px;
}

</style>


Thanks this is my entire page:



<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">

<style>

.navmenu {
background-color: #FFFFFF;
}

.navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
}

.navmenu li:last-child {
margin-left: auto;
}

.navmenu ul li a {
text-decoration: none;
margin: 4px;
padding: 5px 20px 5px 20px;
color: #FFFFFF;
background: #4285F4;
display: inline-block;
}

.main-content {
padding: 5px 20px 5px 20px;
line-height: 18px;
}

.feedback-search {
font-size: 13px;
}

.feedback-search a {
text-decoration: none;
}

.feedback-search a:hover {
text-decoration: underline;
}

.title {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 18px;
}

.title a {
text-decoration: none;
}

.title a:hover {
text-decoration: underline;
}

.tags {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 13px;
color: #006621;
}

.script {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 13px;
}

</style>

</head>
<body>
<div class="navmenu">
<ul id=menu>
<li><a href="http://www.clihelp.org/Clihelp%20V2/index.php">Clihelp</a></li>
<li><form action='q.php' method='GET'>
<input type='text' size='25' name='search'>
<input type='submit' style='position: absolute; left: -9999px' name='submit'/>
</form></li>
</ul>
</div>

<div class="main-content">
<?php

$button = $_GET ['submit'];
$search = $_GET ['search'];

if (!$button)
echo "you didn't submit a keyword";
else {
if (strlen($search) <= 1)
echo "Search term too short";
else {
echo "<p>Your search - <b>$search</b> ";

mysql_connect("localhost", "username", "password");
mysql_select_db("db");

$search_exploded = explode(" ", $search);

foreach ($search_exploded as $search_each) {

$x++;

if ($x == 1)

$construct .= "(CONCAT(code,cliCommandId) LIKE '%$search_each%' OR os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%') ";
else
$construct .= "AND (CONCAT(code,cliCommandId) LIKE '%$search_each%' OR os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%')";

}

$construct = "SELECT * FROM cliCommand WHERE $construct";
$run = mysql_query($construct);

$foundnum = mysql_num_rows($run);

if ($foundnum == 0)
echo "- did not match any documents.</br></br>Suggestions:</br></br>- Make sure all words are spelled correctly.</br>- Try different keywords.</br>- Try more general keywords.</br>- Search by id.";
else {
echo "- About $foundnum results - <span class='feedback-search'><a href=''>Give us Feedback about this result</a></span><br><br>";

while ($runrows = mysql_fetch_assoc($run)) {
$cliCommandId = $runrows ['cliCommandId'];
$code = $runrows ['code'];
$os = $runrows ['os'];
$title = $runrows ['title'];
$tags = $runrows ['tags'];
$script = $runrows ['script'];

echo "
<div class='title'><a href=''>$title</a></div>
<div class='tags'>$tags</div>
<div class='script'>$script</div><br>
<p>
";
}
}
}
}
?>
</div>
</body>
</html>




Answer

Change your structure to add a wrapper like this:

<div class="wrapper">
    <div class="main-content">
    </div>
    <div class="sidebar">
    </div>
</div>

Then on your CSS you can either use flexbox on your wrapper or float: left; for your main content and float: right; for your sidebar.