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

Clicking to remove added child element

I have written a script that creates an image popup when the site loads. Here is the code: <script type="text/javascript"> function showPopup() { var div = document.createElement('div'); div.className += 'popup'; div.inne ...

javascripthtmlcss

What is the maximum number of JavaScript functions allowed in a single HTML file?

My HTML5 file includes JavaScript (created from CoffeeScript) directly within the HTML file, as I prefer this approach for my HTML/JavaScript programming. The code consists of four JavaScript functions that convert one temperature unit to another. Strang ...

javascripthtmlcoffeescript

How can you call a function in JavaScript based on a condition?

Is there a way to conditionally truncate text using a function called Truncate only when the offsetHeight of the left div with class demo is greater than the offsetHeight of the right div? If this condition is not met, then simply return the original conte ...

javascripthtmlcss

What steps can I take to ensure that my popup images continue to appear?

Currently, I am working on creating a webpage that features thumbnails sourced from a local geoserver. The goal is to have these thumbnails expand into dialog windows that can be moved around. While I have successfully implemented the functionality to expa ...

javascriptjqueryhtmlxslt

Resize a container to match the height of either its children or the full height of the window

I'm seeking advice on how to properly use height: 100%. Is there a way to scale a div based on the height of the window and its content simultaneously? I want one to override the other if necessary. Here's an example of standard height 100% css ...

htmlcss

Persistent footer text moving around

Check out the sticky header I created here. However, when it sticks in place, the text moves down and goes out of the container. I want the header to remain within the container. Here is my HTML & jQuery: <div id="container"> <div id="menu ...

htmlcss

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

I am working on a website that has drop-down menu headings styled with CSS. I am looking to enhance these certain menu headers by adding small down-facing arrows indicating they are clickable. Does anyone have any suggestions on how I can achieve this? ...

htmlcssuser-interface

When the previous textbox is filled, the cursor will automatically move to the button

Utilizing an RFID reader where students tap their ID to display basic info, a hidden button on the form opens a modal with various purposes for selection. The challenge is shifting focus of cursor to the button and automatically clicking it when the last ...

javascriptphpjqueryhtml

Is it feasible to verify for vacant dates with a single click?

Is there a way to determine if a date value is empty, and if it is, display a popup indicating so? After some research, I stumbled upon a similar issue where the date value was always filled with a default "mm/dd/yyyy" value. The solution provided involv ...

javascripthtml

How to Disable a Dynamically Generated <li> Element Using jQuery on Click Event

Script Query: Creating <li> Elements Dynamically echo '<div class="pagination"><ul>' . "\n"; // Previous Post Link. if ( get_previous_posts_link() ) { printf( '<li>%s</li>' . "\n", get_previ ...

javascriptjqueryhtml

The DXTreeview feature in AngularJS restricts the expansion of branches

My MVC5 project contains an Index.aspx file, but when I run it in VS2013, only the top branches of the tree are visible without any option to expand them. Resharper confirms that my references are correct. Being new to HTML5 and Angular programming, I am ...

angularjshtmlgoogle-chromeasp.net-mvc-5devextreme

Color-coding HTML table cells depending on the SQL flag value

After successfully constructing a SQL query that incorporates three conditions from my database table and sets a flag based on them, I have made progress in my project. The query looks like this: UPDATE staging SET `miuFlag` =1 WHERE `lowSideMIUNumAr ...

phphtmlcssmysql

I am not familiar with this HTML element, it's a mystery to me

As I develop a data-recollection view in HTML, I've recognized the necessity of creating something similar to this: To elaborate, it's an image created hastily, with an input where users can enter data. When they click the "+" button, another in ...

javascripthtml

What is the best way to eliminate the Mat-form-field-wrapper element from a Mat-form-field component

I have implemented Angular mat-form-field and styled it to appear like a mat-chip. Now, I am looking to remove the outer box (mat-form-field-wrapper). <div class="flex"> <div class="etc"> <mat-chip-list i18n-aria-lab ...

htmlcssangularmat-form-field

Jumping CSS dropdown menu glitch

I'm facing an issue with a dropdown menu. The main problem is that the "parent" link is moving when hovered over. HTML: <ul id="nav"> <li><span>Page 1</span> <ul> <li><a>Extralong Pag ...

htmlcssdrop-down-menu

Using div tags may cause rendering issues

I am trying to use multiple div tags with webkit borders, but for some reason only the one called 'Wrapper' is displaying properly. Here is my code: .wrapper { margin: 20px auto 20px auto; width: 800px; background: url('images/background_1. ...

csshtmltags

Tips for incorporating razor isolated/code behind CSS classes into MudBlazor components

Within my codebehind file, I have defined a CSS class. When I use the "class" attribute on normal HTML elements, the style is applied correctly. However, if I apply the class to a MudElement using the "Class" attribute, the style does not get pulled. Altho ...

cssblazormudblazor

What is the best way to position a single element in React using the Grid Component without causing any overlap?

I am struggling with positioning 3 components on my react page: PageHeader, SideMenu & FeatureList (which consists of Display Cards). Here is the code for each component: App.js // App.js code here... PageHeader.js // PageHeader.js code here... SideMenu ...

javascriptcssreactjsgridfrontend

100% width is applied to the table cell within the div element

Below is the code I am working with: <div style='display: table'> <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div> </div> I'm ...

htmlcss

Navigating to different HTML pages by utilizing <a> elements in Angular 2

As a newcomer to Angular 2, I've decided to build my personal website using this framework. The main page of my website contains bio information, while the other page will feature blog content. Both pages will have a shared header and footer, but diff ...

htmlangulartypescriptangular2-routingangular2-template