I have a question on how to create dynamic width columns to my services html pag
ID: 3907891 • Letter: I
Question
I have a question on how to create dynamic width columns to my services html page.
I need to create 2 dynamic width columns, I do not have any clue how to do this, my code is below can someone please help, I need this within 24 hours:
***************************************CSS*****************************
/* HTML body CSS upated for liquid format*/
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.42857143;
color: #333;
}
/* top section where logo text present */
.top
{
background-color: #000080;/* top section to be dark navy blue */
text-align:center;
padding: 10%
max-height: 10%;
}
/* top section anchor tag design */
.top a
{
color:white;
font-size:15px;
text-decoration:none;
color: white;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
/* on hover top section */
.top a:hover {
font-size: 30px;
}
/* top section URL .com text color white */
.dotcom{
color:white;
}
/* H1, H2, H3, H4 tag centers */
h1, h2, h3, h4 {
text-align:center;
}
/*paragraph styles italic and center*/
h2,h3, h4{
text-align: center;
}
p{
font-style: italic;
text-align:center;
}
/*body section design as body header*/
section
{
/*body section design as coffee color researched color from internet*/
background-color: #885159;
color: #000000 ;
padding: 1% 1%;
text-align: center;
font-size: 28px;
font-weight: bold;
}
/* Add a black background color to the top navigation */
header .topnav {
margin-top: 1%!important;
margin-bottom: 1%!important;
list-style-type: none;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
header .topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 2% 2%;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover to gray */
header .topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link as light blue*/
header .topnav a.active {
background-color: #0275d8;
color: white;
}
/* Add dark grey as background to footer */
footer
{
padding-top:0%;
padding-bottom:0%;
padding-left:1%;
font-weight:bold;
font-size:15px;
color: brown;
}
/* Footer menu style */
footer .topnav{
list-style-type: none;
font-size:15px;
overflow: hidden;
margin-left:10%;
padding-left:10%;
}
/* sidebar format */
#sidebar{
float:left;
width: 35%;
border: 2px solid brown;
padding-bottom: 1%;
}
/* updated for rightbar */
#rightbar{
float: right;
width: 35%;
border: 2px solid brown;
}
/* Style the links inside the footer navigation bar */
footer .topnav a {
float:left;
text-decoration: none;
color: #2a2730;
margin-right: 10%;
}
/* Change the color of links on hover of footer navigation bar underlines the link*/
footer .topnav a:hover {
clear: both;
color: brown;
/* updated to include impages and support ofr contact us*/
input[type=text],
select ,input[type=password],radio{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 100%;
background-color: #800D1E;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #802F1E;
}
section {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: auto;
}
div.banner {
text-align: center;
width: 100%;
height: auto;
}
*******services html**************************
<!DOCTYPE html><!--HTML document-->
<html lang="en-US"><!--language is english-->
<head>
<title>Love for dogs</title><!--Title of Organization-->
<link rel="stylesheet" type="text/css" href="css/main.css" /><!--this is the link to the Css-->
</head>
<meta charset="utf-8"/><!--This sets the character set which I saw on the video from the course-->
<title> Lovefordogs.com</title><!--This title will show the website at the top of the page-->
<body>
<header>
<div class="top"><!--This provides the logo at the top-->
<a class="logo" href="index.html">Lovefordogs<span class="dotcom">.com</span></a>
</div>
<nav>
<ul class="topnav"><!--This provides the navigation to the other pages at the top-->
<li><a href="index.html">Home</a><!--This is the Home Page,nav is in order of links-->
</li>
<li><a href="aboutus.html">About Us</a><!--This is the Favorites Page link nav is in order of links-->
</li>
<li><a href="gallery.html">Gallery</a><!--This is the Media Page link where pictures will later be uploaded nav is in order of links-->
</li>
<li><a href="services.html" class="active">Services</a><!--This is the Interests Page link where visitors will select interests-->
</li>
<li><a href="contactus.html">Contact Us</a><!--This is the Register Page link where visitors will later register for the site-->
</li>
</ul>
</nav>
</header>
<section id="bannerImages"><!--This is the section Id for the Banner image and description on top of banner-->
Love for dogs Organization<br/>
<img src="images/bannern.png" id="adBanner" alt="Banner"/><!--image of logo banner that links to picture-->
</section>
<h2> This Services page will be updated with a description at a later date</h2><!--Used the h2 because h1 was too large for size of text-->
</main>
<footer>This Site is for me
<nav>
<ul class="topnav"><!--This provides the navigation to the other pages at the top-->
<li><a href="index.html">Home</a><!--This is the Home Page,nav is in order of links-->
</li>
<li><a href="aboutus.html">AboutUs</a><!--This is the Favorites Page link nav is in order of links-->
</li>
<li><a href="services.html" class="active">Services</a><!--This is the Media Page link where pictures will later be uploaded nav is in order of links-->
</li>
<li><a href="gallery.html">Gallery</a><!--This is the Interests Page link where visitors will select interests-->
</li>
<li><a href="contactus.html">Contact Us</a><!--This is the Register Page link where visitors will later register for the site-->
</li>
</ul>
</nav>
</footer><!--footer at bottom for copyrights each area is opened and closed-->
</body>
</html>
Explanation / Answer
//code to make dynamic width column
<div id="main">
<div id="firstColumn">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaa
</div>
</div>
"This is flex (flexible box to make your content flexible according to the usage".As you enter the data in the firstcolumn div it will automatically streches the div .
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.