Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content...

This is the structure:

 * {
padding: 0;
margin: 0;
}  
body {
background-color: #ccc;
background-repeat:repeat;
font: Tahoma, Geneva, sans-serif;
color: #FFF;
}
.wrapper {
width: 95%;
margin: 0 auto;
}
/* ------------------------ Start Header -----------------*/
.header {
background-color: #333;
}
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/
/* ------------------------ Start Nav Bar -----------------*/
.nav-bar {
background-color: #E8E8E8;
margin: 0px 0px 13px 0px;
min-height: 17px;
padding: 13px;
border: 1px solid #AEAEAE;
}
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li {
list-style: none;
display: inline;
margin-right: 16px;
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif;
}

.nav-links li a:link {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
...
...

Want the outer layout to match the content's height?

The solution tweaked some code for better alignment. Here's how it was done:


#wrapper {
vertical-align:top;
width: 95%;
margin: 0 auto;
}

#outer-section {
background-color: #e8e8e8;
width: 97.85%;
padding: 13px;
margin-bottom: 13px;
border: 1px solid #AEAEAE;
vertical-align: top;

...
...

By adjusting some styles and positioning elements appropriately, the issue of expanding the layout with content was successfully addressed.

htmlcsslayoutheight

Answer №1

I have revised your code for better functionality...

CSS

* {
padding: 0;
margin: 0;
}  
body {
background-color: #ccc;
background-repeat:repeat;
font: Tahoma, Geneva, sans-serif;
color: #FFF;
}
.wrapper {
width: 95%;
margin: 0 auto;
}
/* ------------------------ Start Header -----------------*/
.header {
background-color: #333;
}
* html .header {height:110px} /* IE Min-Height Hack */ 
/* ------------------------ End Header -----------------*/
/* ------------------------ Start Nav Bar -----------------*/
.nav-bar {
background-color: #E8E8E8;
margin: 0px 0px 13px 0px;
min-height: 17px;
padding: 13px;
border: 1px solid #AEAEAE;
}
* html .nav-bar {height: 17px} /* IE Min-Height Hack */ 

.nav-links li {
list-style: none;
display: inline;
margin-right: 16px;
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif;
}

.nav-links li a:link {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:visited {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:hover {
background-color: #E8E8E8;
color: #999;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
/* ------------------------ End Nav Bar -----------------*/
/* ------------------------ Start outer content -----------------*/
#container {
  overflow: hidden;
  width: 100%;
  clear:both;
}

#outercontent {
background-color: orange;
padding: 10px;
min-height: 655px;
margin-bottom: 13px;
border: 1px solid #AEAEAE;
clear:both;
box-sizing: border-box;
}
/* ------------------------ End outer content -----------------*/

/* ------------------------ Start Columns -----------------*/
#centercolumn { /* Parent Wrapper for inside boxes background-color:    #333333; */ 
background-color: red;
margin: 0;
padding: 20px;
width: 80%;
min-height: 630px;
float: left; 
box-sizing: border-box;
}
I
.rightcolumn {
padding: 10px;
padding-top: 0px;
width: 20%;
float: left;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
margin: 0px 0px 0px 0px;
box-sizing: border-box;
}

.rightcolumn-block {
padding: 7px;
min-height: 160px;
border: 1px solid #AEAEAE;
background-color: #ccc;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
}

.p {
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif;
}

table.db-table-products { border-right:1px solid #ccc; border-bottom:1px   solid #ccc; background-color:#FFF; overflow:hidden;}
table.db-table-products th  { padding:5px; border-left:1px solid #ccc;   border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma,   Geneva, sans-serif, bold; background-color: #FFF; color: #000;}
table.db-table-products td  { padding:4px; border-left:1px solid #ccc;   font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border-  top:1px solid #ccc; background-color:#999;}

table.db-table-products caption { 
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif;
display: table-caption;

}

table.db-table-products hr { 
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

/* Links */
table.db-table-products a:link {
color: #FFDD38;
}

/* visited link */
table.db-table-products a:visited {
color: #D8C150;
}

/* mouse over link */
table.db-table-products a:hover {
color: #D8B70F;
}

/* selected link */
table.db-table-products a:active {
color: #D8B70F;
}


/* ------------------------ End Columns -----------------*/
/* ------------------------ Start Footer -----------------*/
#footer {
border: 1px solid #AEAEAE;
padding: 15px;
margin-bottom: 13px;
background-color: #e8e8e8;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;

   background-color: blue;
 /* padding-bottom: 100em; */
 /* margin-bottom: -200em; */
}
/* ------------------------ End Footer -----------------*/

h1 {
font-size: 23px;
font-family: Arial;
font-weight:bold;
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
}

h2 {
font-size: 23px;
font-family: Arial;
font-weight:bold;
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif; 
}



.float {
float: left;
padding: 0px 10px 0px 0px;
}
img {
border: none;
}
/* Links */
a:link {
color: #fff;
text-decoration: underline;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #333333;
background-color: #fff;
text-decoration: none;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <!-- <link href="table-css/table-db.css" rel="stylesheet" type="text/css"> -->
 <link rel="stylesheet" type="text/css" href="main4.css" />
 <title>Products Market</title>
 </head>
<body>

 <div id="container">
 <!-- Start Wrapper -->
 <div class="wrapper">
 <!-- Start Header -->
 <div class="header"> <img src="images/logo.jpg" alt="Logo" width="1200" height="150" /> 
 </div>
 <!-- End Header -->
 <!-- Start Navigation Bar -->
 <div class="nav-bar">
 <ul class="nav-links">
  <li><a href="#">Home</a></li>
  <li><a href="#">24h Monetary Market</a></li>
  <li><a href="#">Actual Monetary Market</a></li>
  <li><a href="#">Products Market</a></li>
  <li><a href="#">Jobs Market</a></li>
  <li><a href="#">Contact me</a></li>
 </ul>
 </div>
 <!-- End Navigation Bar -->
 <!-- Start Outer Content -->

 <div id="outercontent">
     <div id="centercolumn">
          <h1><b><u>Welcome</u></b></h1>
          <p>  
         <?php include 'test.php'; ?>
         </p><br />
     </div>  

     <!-- Start Right Content -->
     <div class="rightcolumn">

          <div class="rightcolumn-block">
              <h2><u><b>About Me</b></u></h2>
              TEXT 
          </div>

          <div class="rightcolumn-block">
              <h2><u><b>Search</b></u></h2> 
              TEXT
          </div>

     </div> <!-- End Right Content -->


  </div>

  <!-- End Outer Content -->
  <!-- End Outer Content -->
  <!-- Start Footer -->
  <div id="footer"> &copy; Copyright with <a href="http://www.code-sucks.com/">Code-Sucks.com</a> 2006-2015 </div>
  <!-- End Footer -->
  </div>
  <!-- End Wrapper -->
  </div>
  </div>

</body>
</html>

UPDATES MADE

1] I maintained consistency by using the same CSS style for h1 and created a separate style for h2. It is recommended to have only one main title (h1) on each page.

2] The original code had two right column structures. I simplified it by converting rightcolumn into a wrapper and introducing .rightcolum-block for individual blocks. This separation allows better control of the sidebar layout.

3] In the CSS for #outercontent, added clear:both; for proper element stretching, and included box-sizing: border-box; in centercolumn and rightcolumn to accommodate padding and borders within set widths.

4] Removed unnecessary width setting in #outercontent.

5] Adjusted the width settings—replaced pixel width in rightcolumn with percentage width for better alignment with centercolumn.

These adjustments aim to enhance your code structure and functionality. Don't hesitate to compare and explore further if needed. You can refer to resources like http://www.w3schools.com/ for detailed CSS properties information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to dynamically adjust an element's width in CSS depending on the presence of a separate element

I have a text input box appearing on the left side with a button positioned next to it on the right. For certain pages, I want to display a checkbox next to the input box and move the button below it. Is there a way to achieve this using CSS flexbox or a ...

javascripthtmljquerycss

Determining the Height of a Navigation Bar Automatically with CSS

My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically. I tho ...

htmlcssreactjsoverlay

Tips for implementing $setValidity with ng-if for the same field in Angular

Hey there, I'm currently facing an issue with using form.form_field.$setValidity on an ng-if tagged field. When testing out the code, I encountered the following error: angular.js:13642 TypeError: Cannot read property '$setValidity' of unde ...

htmlangularjs

Having trouble with the nth-child CSS property in Bootstrap?

My cards need some styling adjustments - specifically, I want the first and third card in each row to have a top margin of 50px. Strangely, this doesn't seem to work with Bootstrap, but it does with pure CSS. Is there a specific class in Bootstrap tha ...

csstwitter-bootstrapbootstrap-4

How can I align the content within two div elements?

I'm facing a bit of a challenge that I can't seem to figure out. Within a div, I have one photo and inside another div, there is also a photo. I was able to resize both images from the parent and child divs successfully. <div style="width:100 ...

htmlcss-positionimage-resizing

Desktop media queries are functioning properly, yet experiencing issues on mobile devices

I've come across this same question multiple times, but the solutions I've found so far haven't been helpful. My media queries are working perfectly on desktop, but they don't seem to take effect on three different android devices. It&a ...

androidhtmlcssmedia-queries

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

javascripthtmlcanvasrenderingpixi.js

What is the reason that PHP has the ability to set Cookies but Local Storage does not?

Let's take a step back to the era of cookies, not too far back since they are considered old but still quite relevant. PHP allows you to set and read them even though they are a client-side technology; however, JavaScript can also be used completely o ...

javascriptphphtmlcookieslocal-storage

Tips for implementing text-overflow ellipsis in an HTML input box?

On my website, I have input fields where I've added the following CSS styling: .ellip { white-space: nowrap; width: 200px; overflow: hidden; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } H ...

htmlcssellipsis

Navigating jQuery Tabs by Linking to a Specific Tab in a Separate File

I am currently using Bootstrap 3 to develop a basic website. On the about.html page, I have set up Tabs with various content. <ul class="nav nav-tabs" id="TabSomos"> <li class="active"><a href="#somos" data-toggle="tab">About Us</a> ...

javascriptjqueryhtmltwitter-bootstraptabs

Clicking on the button will instantly relocate the dynamically generated content to the top of the page, thanks to Vue

Here is some dynamically generated content in the left column: <div v-for="index in total" :key="index"> <h2>Dynamic content: <span v-text="index + ' of ' + total"></span></h2> </div> There is also a butt ...

javascripthtmlvue.jsvuejs2vue-component

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox

I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...

javascriptjqueryhtmlcss

How to center align an input vertically with Bootstrap 3

I am having trouble vertically aligning an input in my project. Interestingly, my code works for a span but not for the input! I'm puzzled - what could be the reason behind this? JSFiddle Here is the CSS code snippet: .float { display: table-cel ...

htmlcsstwitter-bootstrap-3

The div is not positioned on the left side

I'm struggling with aligning three divs next to each other in HTML and CSS. I've set them to float: left, but they are not obeying this style rule. .threethings { width: 20%; } .threethings div { text-align: center; position: relative; ...

htmlcssweb

Revamping the Look: Refreshing Background of Div

I'm attempting to change the background image of the body element on a webpage when I hover over links with data-* attributes. It's working perfectly, but I can't seem to figure out how to create a smooth fade between the images when a link ...

javascriptjquerycsshoverbackground-image

Accessing the parent element within a hover declaration without explicitly naming it

I am facing a challenge with three nested divs, where I want to change the color of the children when the parent is hovered. However, I prefer not to assign a specific class name to the parent element. The issue arises because the children have their own ...

cssreactjs

Positioning HTML elements using CSS and avoiding the use of tables

I'm struggling with my clear CSS declarations. This is how I'd like it to appear: View the Fiddle demo HTML: <div id="timesheeteditor"> <div id="weekselector"> <div>Week 1</div> <div>Week 2</div> ...

htmlcss

Transferring information to an Ionic 5 custom element label

In my ionic 5 app, I have a side menu and tabs. Each page can have different contents for the side menu and the tabs. Instead of duplicating the ion-menu in each page, I created a header component (and one for the tabs) as follows: HEADER COMPONENT: <i ...

htmlangularionic-framework

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

javascripthtmlcssangular

The functionality of anchor links created through ajax is not operating correctly

Issue: I am encountering a problem where I have a table filled via Ajax, containing local anchors. When an anchor is clicked, it should make a section visible and automatically scroll to it. This functionality works when manually filling the table, but not ...

javascriptphpjqueryhtmlajax