Placing a Div at One Third of the Height of the Viewport

Hello, I'm looking to enhance the appearance of my website using the rule of thirds.

I have a tall div that I would like to position one-third of the way down from the top of the browser window viewport height.

This is what I have tried so far, but it doesn't seem to be working:

div {
  display: block;
  margin-top: 33vh; 
  margin-left: auto;
  margin-right: auto;
  width: 50rem;
  transform: translate(0, -50%);
  position: relative; 
}

I believe the issue lies with the transform property not functioning correctly.

Appreciate any assistance you can provide!

csspositioning

Answer №1

If you're looking for the optimal approach, it seems like employing JavaScript would be the most effective way to go.

When it comes to the JavaScript aspect, consider implementing something along these lines:

<script>
var vHeight = window.innerHeight; // determine viewport height
var vHeightThird = vHeight/3; // calculate one-third of viewport height
$('div').css({position: 'absolute', marginTop: -(vHeightThird)}); // set a negative top margin equal to one-third value for positioning

// adjust values when resizing browser
window.addEventListener('resize', function(){
    var vHeight = window.innerHeight; // update viewport height
    var vHeightThird = vHeight/3; // recalculate one-third of viewport height
    $('div').css({position: 'absolute', marginTop: -(vHeightThird)}); // set a negative top margin based on one-third value for positioning
});
</script>

I haven't tested this solution myself, but it should fulfill your requirements. Additionally, please ensure that you include jQuery in your implementation as my solution relies on it.

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 process for altering the color of a table using JavaFX?

In my JavaFX application, I'm working with a table and I want users to be able to change the color of the selected element using a color picker. However, when I attempt the following code: menuBar.setStyle("-fx-background-color:" + settings.getRgbSt ...

javacssjavafx

Blurring isotopes within Google Chrome

While working with isotope in Google Chrome, I noticed that all items have the following CSS code: -webkit-transform: translate3d(properties); In Chrome, every even element [2,4,6,8,10,12,14...] appears blurred, whereas in Firefox everything looks normal ...

javascriptjquerycssgoogle-chromejquery-isotope

The z-index property does not seem to apply to pseudo elements

I am facing an issue while trying to add a pseudo element after a div in my react project. Surprisingly, the code works perfectly fine in CodePen but fails to work on my local machine. I have applied z-index only in CodePen, which seems to resolve the issu ...

htmlcssz-index

Tips for aligning an icon vertically within a span tag

I have a span similar to this: <span class="indicator"></span> Sometimes this span contains numbers like: <span class="indicator"> <span>10</span> </span> Other times it may display Kendo-UI icons, such as: < ...

htmlcsskendo-ui

Achieving a centered SearchBar with a single button on the NativeBase header

I am trying to center the search bar with the menu button on the right side of the header using Nativebase. The code for this is provided below: <Header> <Body> <Button style={styles.searchButton} onPress={() => ...

cssreactjsreact-nativenative-base

CSS hover effects are not displayed when using the input type button

I'm having issues with my hover effects not showing: <input type="button" class="button" value="Click"> However, this code works fine: <button class="button">Click</button> The CSS codes are ...

htmlcssanimationcss-animations

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

JavaScript failing to accurately measure the length

Currently experiencing a Javascript issue where the length of an element is not displayed correctly when using .length, even though it shows up in Chrome console. Here is what it looks like in Chrome console <html xmlns="http://www.w3.o ...

javascripthtmlcssconsole.logvariable-length

Ways to automatically close the search box when the user clicks anywhere within the body

What I desire At the moment, the search box opens and closes when the font awesome search icon is clicked. However, I also want the option for the search box to close if the user clicks anywhere within the body. Screenshot [ My Custom Code <div ...

javascripthtmlcss

Eliminate excess spacing to the right of input fields

I've been attempting to configure a flexbox layout with multiple input fields, but I'm having trouble achieving the desired look. Here is the code snippet that I've been working with: .inputSettings { display: flex; flex-direction: ro ...

htmlcssflexboxalignment

Updated INNER header and footer - unrelated to the answered questions

After observing, the inner-header and inner-footer div scroll along with the area that contains the select list. How can I make that area scroll down while keeping the inner-header/footer fixed within the content? I hope my query is understandable. Thank ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Issues with CSS margins in IE causing bugs?

Currently dealing with a CSS issue that seems to be specific to Internet Explorer. I haven't encountered it in Firefox, Safari, or Opera during testing with IE 11. The problem: I've set the top margin of the website content/stage to around 2%, ...

cssinternet-explorermargin

Adding a button to the right of a text-field input in Vuetify app

I need advice on the best way to use Vuetify in order to display a button to the right of a text-field (attached). I've checked the main site for information but couldn't find anything related to this specific scenario. https://i.sstatic.net/Pp ...

cssvue.jsvuejs2vue-componentvuetify.js

Tips for highlighting text in a textarea using jQuery or JavaScript

I'm intrigued by Facebook's functionality. They utilize textareas in their comments and status sections, but whenever I tag someone in a post, the selected text is highlighted with a light blue background within the textarea. As far as I know, th ...

javascriptjquerycss

Adjusting the height of table rows based on the content within the <td> element

I am facing a challenge with a table that includes rows with 2 columns - one for images and the other for text. The issue arises when resizing large images in one column, causing the row to take its height from the image cell rather than the text cell. Sin ...

javascriptjqueryhtmlcssinternet-explorer-8

The gap in rows is not displayed in CSS subgrid

Currently, I am delving into the world of CSS grid and subgrid. My current project involves creating a simple form with two columns and incorporating a few subgrids. In my design, the parent grid displays a gap of 1em - both the columns and rows have a pr ...

csscss-gridsubgrid

Problem with styling a CSS table

I am having an issue with the table style. My goal is to set the table radius to 8px, but my code doesn't seem to be working. Can someone assist me with this? Thank you! //ps I also require border-collapse in my code. Here is the link to my jsfidd ...

htmlcss

Retrieve CSS height using Jquery, based on the declared value rather than the computed value

In a previous version of jQuery, the default behavior was different. When I use .css("height") and .height(), it gives me the computed height instead of what I actually want. I only need the height value if it is explicitly declared in the CSS for that ele ...

jqueryhtmlcss

Can a single character within a span be located and customized using only CSS techniques?

My inquisitive mind believes that the answer lies in the negative, however, CSS3 pseudo-selectors have the ability to work their magic almost like performing illusions on a stage. In an absurd context, I am determined to locate and style the period charac ...

csscss-selectors

Execution of Javascript code does not provide the expected output when run via VS Code

I've attempted numerous times, but the desired output doesn't appear when I run it through VS Code. However, this code runs smoothly and produces the desired output when executed in Replit's online code editor. Can anyone offer assistance? l ...

javascripthtmlcssreplit