Setting the maximum height for a div element

Struggling to understand how a div can occupy the entire height of a container. In this particular scenario, I am aiming for the "photo" div to take up the full height, with the yellow and green content appearing on the right side of the photo. Below is the code snippet:

#header {
  background-color:#7b88d2;
  text-align:center;
  height: 20px;
}
#container {
  max-width:800px;
  border-style: solid;
  border-width: 1px;
}
#main {
  width: 100%;
  height: 100%;
}
#photo  {
  float:left;
  background-color:#FF3366;
  padding: 10px;
}
#logo  {
  float:right;
  background-color:#FF3366;
  padding-right: 10px;
  height: 100%;
}
#footer {
  background-color:#669933;
  text-align:center;
  height: 20px;
}
#col1 {
  float: left;
  padding-left: 10px;
}
#col2 {
  margin-left:auto;
  margin: 0 auto;
}
#txt_container {
  padding-left: 10px;
  background-color:#ffffcc;
}
#col3 {
  display: inline;
  float: right;
  padding-right: 10px;
}

I'm hesitant to set the height in pixels since the exact height of the photo is unknown.

Check out the demo here: https://jsfiddle.net/wsfnqvyn/

Your assistance is greatly appreciated. Thank you.

htmlcssheight

Answer №1

It seems like the issue is a bit random. The size of an image may not always match up perfectly with your div container (whether or not this is important to what you're trying to convey). Consider using the css background method instead.

For example, define the attributes of your .photo class and then add this code snippet to your html file.

<div class="photo" style="background-image: url(image.jpg)"></div>

In this scenario, your .photo class should have at least one line similar to the following.

.photo {
background-size: cover;
}

Keep in mind that this technique may limit certain CSS functionalities in some cases.

Answer №2

I have made some updates to your jsfiddle. You can view the changes in the updated version here: https://jsfiddle.net/wsfnqvyn/6/

To achieve the desired layout, I have utilized display:table and table-cell properties.

#header {
   background-color:#7b88d2;
   text-align:center;
   height: 20px;
}
#container {
   max-width:800px;
   border-style: solid;
   border-width: 1px;
}
#main {
   width: 100%;
   height: 100%;
   display:table
}
#photo  {
   display:table-cell;
   background-color:#FF3366;
   padding: 10px;
}
#logo  {
   display:table-cell;
   background-color:#FF3366;
   padding-right: 10px;

}
#footer {
   background-color:#669933;
   text-align:center;
   height: 20px;
}
#col1 {
   float: left;
   padding-left: 10px;

}
#col2 {
   margin-left:auto;
   margin: 0 auto;
}
#txt_container {
  display:table-cell;
   padding-left: 10px;
   background-color:#ffffcc;
}
#col3 {
   display: inline;
   float: right;
   padding-right: 10px;
}

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

What is the best way to adjust the height of a row in a Material UI table using CSS

I've been attempting to establish a row height of 30px for a table (https://material-ui.com/components/tables/), but it seems that the minimum I can set is 53. Why is this restriction in place? How can I adjust the row height to 30px using CSS based ...

cssmaterial-ui

Menu options submerged beneath the surface of a concealed container with overflow property

Attempting to enhance the ui-grid by adding more options to each row using the "3 dots" approach. However, encountered an issue where the dropdown menu extends beyond the screen due to the use of position: absolute. Unable to switch to position: relative b ...

javascripthtmlangularjsangular-ui-gridui-grid

Tips for importing extensions with Rselenium

I could use some assistance in understanding how to activate a chrome extension using RSelenium. The extensions are visible in the browser tabs but are not automatically loaded when working with RSelenium. ...

htmlrgoogle-chromeselenium-webdriverrselenium

What is the best way to create a footer in this scenario and is there a method to perfectly center an

What is the best way to position the footer at the bottom of the page without overlapping the top content? Is there a method to center both the height and width of the header element on the page? Can you review the layout of this webpage and provide feed ...

htmlcsslayoutfrontendfooter

Guidelines for Naming Data Attribute Values in JavaScript

When it comes to the Data Attribute Value, should one use hyphens or camelCase as a convention? Hyphen Example: <input type="text" name="some_input" data-target="to-grab-input-via-javascript"> Camel Case Example <input type="text" name="some_ ...

javascriptjqueryhtml

having difficulty placing 3 pop-up windows on a single page

Struggling to implement multiple popups on my page, each with a unique ID assigned. Any assistance would be greatly appreciated. Here is the code snippet: .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { font-size:20px; t ...

javascripthtmljquerycss

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

Can CSS achieve Turing completeness?

As far as my understanding goes, CSS is not considered Turing complete. However, I admit that my knowledge of CSS is quite limited. Can CSS be classified as Turing complete? ...

cssturing-complete

Changing the value of a form input name after a $scope.$watch event is activated

In my AngularJS 1.4 project, I have a form input element where I am attempting to dynamically set the name attribute. <input type="email" name="{{ctrl.name}}" class="form-control" id="email" ng-minlength="5" required> The assignment of the name att ...

javascripthtmlangularjsformsangularjs-scope

Tips for setting a value in $scope within an ng-repeat loop in AngularJS

I'm currently facing an issue with ng-repeat in angularJS, specifically on how to assign a value in $scope inside ng-repeat. Here is my scenario: I have a JSON file that contains all the data structured like this: [ {BookID:1,Chapter:1,ContentID:1, ...

javascripthtmlangularjs

Tips for creating a navigation system that combines both horizontal and vertical bars

Is there a way for me to have both horizontal and vertical navigation bars on my website? I am new to design and struggling to understand why my CSS isn't working properly when applied to multiple links. <body> <div class="horizontallinks" ...

htmlcss

Does the web browsing context within an iframe get reset when updating or specifying the src or srcDoc attributes?

Based on the official HTML5 specifications, it is stated that: When an iframe element is removed from a document, the user agent must discard the nested browsing context, if any This leads me to question whether changing the src or srcDoc attributes al ...

htmlw3c

Maintain the active menu open when navigating to a different page on the website

My website has a dropdown menu, but whenever I click on a submenu link, the new page opens and the menu closes. However, I want the active menu to remain open on the new page of the website! To demonstrate what I have tried in a simple way, I created an e ...

javascriptjqueryhtmlcssajax

At what point do browsers automatically insert CSS styles as attributes without them being explicitly defined?

Greetings Code Gurus, I find myself grappling with an unexpected CSS anomaly while developing a website. Here is the puzzling code snippet: <div id="..." style="padding-bottom: 78px; padding-top: 78px;" >...</div> These styles are manifesti ...

htmlcssinternet-explorergoogle-chromefirefox

Leverage JSON as the primary data source for Assemble.io

Can Assemble.io be used to compile json files into HTML using templates? If so, how can I configure my gruntfile to accomplish this? Overview of My Folder Structure: Data productlist1.json productlist2.json productlist3.json productdetail1.json product ...

htmljsonassemble

What is the best way to ensure that the input areas stretch all the way to the edge of the screen?

This form is structured similar to Bootstrap: HTML: <div class="container"> <div class="row"> <div class="form-group row-group"> <label class="col-6">First name</label> <input class="col-6" type="text" v ...

htmlcssflexbox

The CSS for a VueJS compiled app seems to fail to apply properly unless manually copied and pasted into the browser's style editor

After compiling my vuejs app with npm run build, I noticed that the CSS does not display when viewing it in Firefox. Surprisingly, the styles do load in the network tab and appear under the style editor, but with "0 rules". However, everything displays fin ...

cssvue.js

Scouring through the text to find a specific word and bring it to the forefront

I need help creating a PHP script that can analyze a text input, which could be an extensive essay, and search for a specific word entered by the user. The script should display the entire text with the searched word highlighted whenever it is found. < ...

phphtml

ul/div element not displaying background color

I am attempting to showcase navigation items horizontally within a blue colored ribbon. Despite my efforts, the background-color property is not being applied to the ul element. I even tried enclosing it in a div element with a blue background, but still n ...

htmlcssbackground-color

Adding a new row to a table is causing issues with jQuery

var info = [{ "pin": "015-08-0011-000-01", "arp": "015-08-0011-000-01", "tin": "342-432-423-000", "firstname": "John", "middlename": "James", "lastname": "Jones", "suffix": "", "qtr": "1st ...

javascriptjqueryhtml