Arranging divs on a webpage

Greetings! I have a CSS 101 question that is troubling me in terms of alignment. Can anyone offer some assistance?

Additionally, I have a couple of inquiries:

  1. When creating HTML divs, what is the best approach - setting size constraints on the divs from the start and hiding overflow content, or allowing inner divs to dictate the size of the parent container?

  2. What units of measurement are recommended for ensuring that divs display well across various screen resolutions - rems or percentages?

Thank you in advance.

csshtmlalignment

Answer №1

Ensuring that the wrapper acts as a container for the content is crucial.

<div id="wrapper"> 
<div id="top"></div>
    <div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>

​

I have adjusted the footer to align at the bottom outside of the wrapper. Moving the top outside is also an option, but remember to update the bottom padding to accommodate its height.

Check out the jsFiddle demonstration: http://jsfiddle.net/F577v/9/

Responses to your Questions:

  1. Depending on the scenario, I always aim to let the content dictate the div size, while ensuring there are appropriate padding and margins for design purposes.

  2. I typically use pixel measurements for sizing and utilize media types in CSS to adapt to various screen resolutions. Here is more information on media types.

Answer №2

To achieve a fixed position layout, you can apply the following CSS code:

section {
   position: fixed;
   top: 200px;
   bottom: 0;
   left: 0;
   right: 0;
}

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

Move the scroll bar away from the scrollable div and reposition it on a different part of the page using CSS

Is it possible to use CSS to position the scrollbar of a div that takes up the left half of my page with overflow-y: scroll to be where the page scrollbar would normally be (far right side of the page)? I've experimented with the ::-webkit-scrollbar ...

htmlcssscrollscrollbar

How come the button is shifting down even though it's set to display inline?

I've recently delved into the world of Bootstrap and CSS, but I'm facing a unique challenge. Despite my research efforts, I couldn't find a solution to my specific issue. I have a <div class="col-md-6"> where I've nested ...

htmlcsstwitter-bootstrapbootstrap-4

Unseen related model fields

I am struggling to figure out what is causing an issue in my code. Can anyone explain why the fields in locations = Location.objects.filter(user=add_profile.user) are not showing up on my html page? models.py class Location(models.Model): user = mode ...

pythonhtmldjango

Parsing HTML using PHP's Simple HTML DOM Parser

I'm having trouble extracting specific information from HTML code using a DOM parser. <div id="posts"> <div class="post"> <div class="user">me:</div> <div class="post">I am an apple</div> &l ...

phphtmlsimple-html-dom

Horizontal scroll through Bootstrap 4 navigation tabs

I'm currently using the newest Bootstrap 4 nav-tabs feature to create tabs and I'm aiming to keep all the tabs in a single horizontal line that can be scrolled. I've attempted to use various JavaScript plugins, but none of them seem to func ...

htmlcsstabsbootstrap-4

Javascript error: The variable calculator_test has not been defined

Why am I receiving an error message: Uncaught ReferenceError: calculator_test is not defined index.html: <!DOCTYPE html> <html> <body> <p>Click the button</p> <button onclick="calculator_test()">test</button> &l ...

javascripthtml

Troubleshooting Google Web Fonts

I seem to be using code similar to what I used before, but it appears that the fonts are not loading. <html> <head> <script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></s ...

htmlcssfont-face

What are some methods to customize the CSS subnavigation without changing the appearance of the main navigation

http://jsfiddle.net/uuyVY/ screenshot https://i.sstatic.net/CzUPk.png I'm attempting to configure the subnav to be white and span the entire containing div (which is 1100px wide), with only the text links displayed vertically. However, I'm stru ...

htmlcss

Insert the ng-if directive into an element using a directive

I am working on an AngularJS directive that involves looking up col-width, hide-state, and order properties for a flexbox element based on its ID. I want to dynamically add an ng-if=false attribute to the element if its hide-state is true. Is there a way ...

javascripthtmlangularjsangularjs-directive

Floating labels in Bootstrap 4.1

While browsing Google, I came across a Bootstrap 4.1 doc example showcasing floating labels: getbootstrap.com/docs/4.1/examples/floating-labels/ Surprisingly, the example page does not provide any explanation on how to achieve this effect, and I couldn&ap ...

cssuser-interfacelabelbootstrap-4

What is preventing me from binding ng-click to my element?

I've encountered an issue where the ng-click event is not activating on my element. Despite using the in-line controller script as shown below, I am unable to trigger my alert. Are there any integration issues that I should be mindful of? What could p ...

javascriptjqueryhtmlangularjsangularjs-directive

Looping through images using JQuery

I'm struggling with an image animation and can't quite figure out how to make it work. <div id="img_loop"> <img src="img/img1.jpg" alt="image1" /> <img src="img/img2.jpg" alt="image2" class="hidden" /> <img src="im ...

javascriptjqueryhtmlcss

The div I'm trying to position at the bottom is currently wedged between other divs

My goal is to move the gray rectangle (<div class="brand"> </div>) below the other elements automatically. Currently, it's stuck between the header and two other body divs. Being a beginner, I'm unsure how to fix this. I've tried ...

htmlcss

Tips for validating multiple email addresses in Kendo UI

I provided a similar code structure <td> <label for="email" class="required">To:</label></td> <td><input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. <a href="/cdn-cgi/l/email-protect ...

htmlkendo-ui

Struggling to retrieve data from the HTML Dom? I have already tried using getAttribute() and getText() methods within Selenium WebDriver

I attempted to extract text/value from the Html Dom using getAttribute() and getText() methods in WebDriver, but I wasn't able to retrieve any values in the console. Could someone please assist me in resolving this issue? The image provided does not c ...

javahtmlselenium-webdriverdomtestng

Tips for creating an HTML report using Python

Currently, I am searching for a solution to convert my saved matplotlib graphs as png files along with some data frames into HTML format. This is similar to how I typically use R2HTML in R. Despite my efforts, I have not been able to locate clear informat ...

pythonhtmlrplotreport

Animating CSS using JavaScript

Recently diving into the world of JavaScript, I've taken on the challenge of creating an analog clock. I began by crafting the second hand using CSS but now I'm eager to transition it to Javascript without relying on jQuery or any other JS framew ...

javascriptcss

Is there a way to gradually reveal an element as I scroll to a specific position?

If the window top position is about 100px from the bottom, I want to create a fading in/out effect for the element overlay. Check out this image Any ideas on how to achieve this? .section-card{ position: relative; height: 500px; line-heigh ...

javascriptjqueryhtmlcss

Creating header menus with section labels in Windows 8 Metro can be easily accomplished by utilizing Javascript

Is there a way to create a navigation menu in Windows 8 Metro JavaScript that includes header menus and section labels, similar to the example shown below? ...

javascripthtmlmicrosoft-metrowinjs

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

My current task involves inserting radio button values into a MySql database using Angular. The form consists of radio buttons with predefined values stored in a json file. Below is an example of how the json file is structured: //data.json [{ "surve ...

javascripthtmljsonangulartypescript