Here is the code that I am working with:
https://jsfiddle.net/kc94aq33/
I am looking to set the top margin of the .wrapper to be 20px from the bottom of the .header.
Does anyone know how I can achieve this?
Here is the code that I am working with:
https://jsfiddle.net/kc94aq33/
I am looking to set the top margin of the .wrapper to be 20px from the bottom of the .header.
Does anyone know how I can achieve this?
I made some changes to the CSS in your JS Fiddle. Here is the updated code:
.logo {
width:550px;
margin:20px auto 20px auto;
}
.logo:after{
content: '';
clear: both;
display: block;
}
It's important to remember to use a clearfix when working with floating containers.
The issue occurring is due to the floating of elements in the header towards the left and right. When all elements are floating either left or right, the parent container, which in this case is the header, collapses to a height of `0px` or the height of the element that is not floating. There are multiple ways to address this problem.
A recommended solution is to create a reusable class called "clearfix" that can be applied to elements containing floating children.
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.wrapper {
margin-top: 20px;
}
Apply the "clearfix" class to the header element, and you will see the element self-clearing.
Here is an example:
<div class="header clearfix">
<div class="left">
<img src="" width="240px" />
</div>
<div class="right">
<h1>Control Panel</h1>
</div>
</div>
<div class="wrapper">
<div class="container">
<h1 class="login_text"></h1>
<form>...</form>
</div>
</div>
This issue arises from a floating element that is not properly closed. To address this, you can include CSS code like the following:
.clearfix {clear:both;}
.header {margin-bottom:20px;}Then, insert
<div class="clearfix"></div>right after the closing tag of your div with the class "right"
I have made updates to your fiddle
Having trouble with php not loading when I open my browser. Here is my database info: MySQL To manage the MySQL Database, you can use phpMyAdmin. If you need to connect to the MySQL Server from your own scripts, use these connection parameters: Host ...
Struggling with this issue for hours, I can't seem to figure out how to: Adjust the position of the placeholder text (Search) by 10 pixels to the right in my select component Reduce the height of the field (maybe by 5px) without success. Could someo ...
Can someone help me figure out how to create a loop that fades in and out every 2 items from an unordered list using jQuery? I've been trying to do this, but my loop only processes one item at a time. <div> <ul> <li>item1</li ...
I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...
Recently, I set up a drop-down menu containing links. Initially, when hovering over the names in the menu, they would change color and display the drop-down. I had successfully made all the names golden, with the hovering name turning black while display ...
Is it possible to determine the length of the visible portion of text that overflows (or calculate the size of the overflow for further processing) using CSS or JavaScript? If so, can this calculation be done dynamically (such as on window resize)? The g ...
I encountered a situation where I needed to dynamically create a grid with square grids of dimensions MxN. Below is the code snippet for achieving this: rerender = (event) => { const height = document.getElementById("y-input").value; const width ...
I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...
I'm currently working with a <div> container styled as flex using the following CSS properties: .icon-container { padding: 3px; padding-top: 15px; padding-bottom: 15px; display: flex; flex-direction: column; align-content ...
I need assistance aligning my social media icons with the navbar on the right side of the display. Can someone provide guidance? The first image shows the current layout, while the second image illustrates how I would like it to appear: http://imgur.com/a ...
I'm struggling to create a vertical center-aligned image gallery on my website with "PREVIOUS" and "NEXT" links for easy navigation. Despite multiple attempts, I can't seem to get it right. Can someone guide me on how to achieve this effect? ...
I am trying to customize the background color of a form-group element. To illustrate my point, take a look at the image below In the image above, I have highlighted the div in question and I want to change its background color from within the form-group. ...
Directories Here is a photo of my directories. I am currently trying to utilize sudokuStyle.css in sudoku_board.html, but for some reason it does not appear to be linking properly in my HTML file. Below is the code snippet from my head section: {% load st ...
Working on a project to develop a dynamic version of the classic game Tic-Tac-Toe... However... Every table cell is displaying an irritating flashing cursor, almost like it's behaving as an input field. Any insights into why this is happening...? O ...
Currently, I am utilizing Selenium to automate the user interface using Java. Within the UI, there is an action button that, when hovered over by the User, displays two clickable options - Create and Edit. For ease of use, I have stored CSS locators as E ...
Currently, I am running tests on my app using an iPhone. Everything seems to be working correctly on the iPad, but when I try clicking on a text field on the iPhone, the view automatically zooms in. It appears that setting the font size to 16px or larger r ...
At the moment, I am utilizing Bootstrap v3.3.6 and jQuery v1.9.1. My current project involves a horizontal navbar that collapses once it reaches a specific screen resolution. I am pleased with how this feature operates and wish to maintain the same breakpo ...
Currently, I am working on a script that will be utilized across various pages and I want to ensure that the elements it generates are not affected by the CSS styles of those pages. Some individuals suggest using CSS like this: body>*{min-height:200px; ...
For my current project, I am utilizing the jquerymobile framework along with the i18Next localization library. Here is the HTML code snippet: <div id="messageboxPage" data-role="page" data-theme="a"> &l ...
I'm currently facing a challenge where I need to add marginLeft of 8px to FormHelperText. However, I have not been successful in doing so within the MuiInput formControl rule or in MuiSelect. Here is the React code snippet: <FormControl error clas ...