Text Changes Size when Expanding

Currently in the process of building a website and facing an issue with the banner placement under the navigation bar. Originally, both divs were perfectly positioned as desired but encountered a problem where upon resizing the browser window, the right div shifted below the left div. Both divs were floated using float:left and float:right.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Welcome </title>
<link rel="stylesheet" type="text/css" href="Style1.css">
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="topHeader">
<div id="logo">
<img src="Images/HeaderLogo.png"  alt="Logo for Matt Meadows">
</div>

</div> <!--End of topHeader -->
</div> <!--End of Header -->
<nav>
<div id="nav-links">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>

</nav>
<div id="contentHeaderContainer">
<div id="contentHeader">
<img src="Images/HomePageContentHeader.png">
<div id="headerText">
<h1 id="welcome">WELCOME</h1>
<p class="Text1">The Way Website Development should be...</p>
<p class="Text2">UNIQUE</p>
<p class="Text5">CONCISE</p>
<p class="Text3">VIBRANT</p>
<p class="Text4">PROFESSIONAL</p>
<p class="Text6">SIMPLE</p>
</div> <!--End of headerText -->
</div> <!--End of contentHeader -->
</div> <!--End of contentHeaderContainer -->
</div> <!--End of wrapper -->
</body>
</html>

CSS:

body, html
{
margin:0;
  height:100%;
  width:100%;
}

#wrapper
{
margin-left: auto;
margin-right: auto;
}

#topHeader
{
width: 100%;
height:75px;
background: rgb(36,36,36); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(36,36,36,1) 0%, rgba(52,52,52,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,36,36,1)), color-stop(100%,rgba(52,52,52,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
}

#logo
{
margin-left: 50px;
padding-top: 10px;
}

nav
{
float:left;
width: 100%;
height: 45px;
background: url('Images/NavBG.png');
-webkit-box-shadow: 0px 7px 15px rgba(20, 20, 20, 0.5);
-moz-box-shadow:    0px 7px 15px rgba(20, 20, 20, 0.5);
box-shadow:         0px 7px 15px rgba(20, 20, 20, 0.5);
}

#nav-links
{
margin: 0 auto;
}

ul
{
margin:0 auto;
padding:0;
list-style:none;
width: 700px;
}

li
{
display:inline;
float:left;
padding: 10px 55px 10px 55px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}

li:hover
{
background: #4d4c4c;
color: #FFF;
}

#contentHeaderContainer
{
height: 450px;
margin-left: auto;
margin-right: auto;
background: rgb(36,36,36); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(36,36,36,1) 0%, rgba(52,52,52,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,36,36,1)), color-stop(100%,rgba(52,52,52,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(36,36,36,1) 0%,rgba(52,52,52,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 7px 15px rgba(20, 20, 20, 0.5);
-moz-box-shadow:    0px 7px 15px rgba(20, 20, 20, 0.5);
box-shadow:         0px 7px 15px rgba(20, 20, 20, 0.5);
}


#contentHeader img
{
float:left;
margin-top: 50px;
}


#headerText
{
float:right;
width: 700px;
height: 300px;
}

#welcome
{
font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #cccccc
}

p
{
font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.Text1
{
color: #999999;
font-size: 20px;
font-weight: bold;
}

.Text2
{
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-left: 100px;
margin-top: 50px;
}

.Text3
{
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-left: 350px;
margin-top: 50px;
}

.Text4
{
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-left: 100px;
margin-top: 50px;
}

.Text5
{
float:right;
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-top:-50px;
}

.Text6
{
float:right;
color:#8d9999;
font-size: 22px;
font-weight: bold;
margin-top:-50px;
}

EDIT: http://jsfiddle.net/w6qxU/

Need assistance to keep both child divs within #contentHeaderContainer fixed in position even during window resizing to maintain static content while the window border moves accordingly.

htmlcss

Answer №1

Do you have a question regarding the #contentHeader img and #headerText? It seems like these elements are shifting positions when resizing the window.

To address this issue, you could try positioning them absolutely with left:0; for the image and right:0; for the header text instead of using float:left; and float:right; respectively.

Consider implementing something similar to the following code snippet:

#contentHeader {
    position:relative;
    width:100%;
}

#contentHeader img {
    position:absolute;
    left:0;
    top:90px;
}

#headerText {
    position:absolute;
    right:0;
    top:45px;
    width:700px;
    height:300px;
}

You can view an example implementation on jsfiddle.

This adjustment ensures that the image doesn't affect the text layout and remains behind it. If this solution doesn't meet your requirements, please provide additional clarification.

Update:

To maintain a fixed distance between the elements, you will need to specify a fixed width for the container. However, this may cause alignment issues when resizing the window. To remedy this, you can use a technique to keep the elements equidistant from the center of the page even during resizing (assuming a container width of 1200px):

#contentHeader {
    position:relative;
    width:1px;
}

#contentHeaderImg {
    position:absolute;
    right:0;
    width:500px;
    top:90px;
    text-align:left;
}

#headerText {
    position:absolute;
    left:0;
    top:45px;
    width:700px;
    height:300px;
}

Adjust the widths of the left and right elements to achieve the desired positioning.

Check out the updated implementation on jsfiddle. I added a separate div around the image (#contentHeaderImg) for easier manipulation due to unknown image width.

In conclusion, maintaining both edge alignment and consistent element arrangement while resizing requires proportional scaling of all header contents.

Answer №2

To ensure that the image and header text are displayed side by side, it is important to provide enough space for them to do so. Make sure to add an appropriate width to the #wrapper element.

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width:960px;
}

Check out the JSFiddle example (wrapper/width)

If you want the content to always occupy the full width, consider using min-width instead.

#wrapper {
    margin-left: auto;
    margin-right: auto;
    min-width:960px;
}

See the JSFiddle demo (wrapper/min-width)

Answer №3

In order to prevent the movement of content while resizing the browser window, it is advisable to steer clear of using absolute units like pixels and instead opt for percentage (%) and viewport units (vw). I found this method to be very effective, especially when styling my Divs.

.centercolumn {
float: left;
width: 50%;
padding: 1%;
background-color: #f8df67;
height: 80vh;
margin-top: 1%;
margin-left: 0px;
margin-right: 1%;
}

.sidecolumn {
float: left;
width: 20%;
padding: 1%;
margin-top: 1%;
margin-left: 0px;
margin-bottom: 1%;
height: 80vh;
}

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

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

I have a jQuery script that swaps out a div when a href="#1" is clicked. The same link, a href="#1", is then replaced by a href="#2" and vice versa. Here is the jQuery code: $('.child2, a[href="#1"]').hide() $('#replacepagelinks a').c ...

javascriptjqueryhtmlmenu

Positioning Firefox absolutely within a table-cell element is possible

Interestingly, it's not Internet Explorer causing me trouble this time, but Firefox. Here is the Fiddle link for reference: http://jsfiddle.net/EwUnt/ The purpose of this table is to highlight both the row and column of the cell where the cursor is ...

javascriptjqueryhtmlcssfirefox

Choose an image and save the selection information for the following page (Tarot card)

I'm in the process of creating a website that showcases multiple tarot cards. The goal is for users to select the cards they're interested in and have their chosen card displayed on the next page. I've implemented some code for selecting the ...

javascripthtmlcssimage

Attempting to navigate the world of AJAX and PHP

My experience with AJAX is limited, but I am currently working on a project that requires a form to submit data without refreshing the page. The goal is to display the result in a modal window instead. To achieve this functionality, I understand that imple ...

javascriptphphtmlajax

Encountering an "Invalid CSS" error while trying to import an external font in SASS

Encountering an issue while attempting to load an external font in my SASS file. Below is the code snippet used to import the font-face from the all.sass file located in the same directory as leaguespartan-bold-webfont.woff and leaguespartan-bold-webfont.w ...

csssassfonts

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs

Code snippets to reduce excess white space on a website using HTML and CSS

On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here There seems to be extra space before and afte ...

javascripthtmlcss

Using Single Quotes as Parameters in JavaScript

I'm currently facing an issue with a function that is designed to populate a field in the parent window when clicked. Specifically, it is meant to fill in a text field with a name. The challenge I am encountering arises when the field contains a sing ...

javascriptasp.nethtmlsyntaxparameters

Is the background image unable to fill up the entire screen?

I'm currently facing an issue with my webpage's background not covering the entire vertical space. Despite trying different solutions and referring to previous posts, I haven't been able to resolve it yet. Here is the relevant code: <div ...

htmlcss

In PHP, special characters in HTML remain unchanged when entered into a text input field

I am currently using the PFBC (PHP form builder class (PFBC)) to generate a TextBox element on a page; However, when dealing with strings containing special characters, it does not properly convert them into normal characters: For example: $razao = "livi ...

phphtmlhtmlspecialchars

Ensuring the validation of numerous HTML forms within a single page

Looking for a way to validate two forms on the same .php page within my manual account activation system. The two forms I have are: Accept form Decline form Upon entering a username and clicking the button on either of these forms, PHP code is executed ...

phphtml

What is the process for accessing my PayPal Sandbox account?

I'm having trouble logging into my SandBox Account since they updated the menu. The old steps mentioned in this post Can't login to paypal sandbox no longer seem to work. Could someone please provide me with detailed, step-by-step instructions o ...

javascripthtmltypescriptpaypale-commerce

Title slide on quarto featuring a captivating full coverage background image with a sleek row of icons at the bottom

I am currently working on creating a title slide for a reveal.js presentation in Rstudio using quarto. My goal is to have a background image covering the entire slide and include one or more small icons at the bottom (specifically on this slide only). I ha ...

cssrstudioquartoreveal.js

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

javascriptcssruby-on-railstwitter-bootstrapsass

Simple: What is causing the error message "TypeError: 'int' object is not callable" to appear? (refer to line 24 in the code)

I'm struggling with a coding issue and can't seem to find a solution. Would appreciate it if someone could provide some guidance on what's going wrong. Essentially, this script is designed to fetch the HTML content of a URL, extract specific ...

pythonhtmlregexselenium

Connecting a href link to a TAB

Check out this useful CODE example I am using. I have a webpage with links that have href attributes. Now, I want to link these pages to another page and have them automatically open a specific tab when clicked. Is this possible? Here are the links on th ...

javascriptphpjqueryhtml

What are the steps for positioning tables using HTML?

As a newcomer to this field (literally just started two days ago), I have managed to generate tables from an XML file using my XSL file. However, aligning these tables properly has become a bit of a challenge. I initially used the align attribute of <ta ...

htmlcss

Unable to get PrependTo to remove itself when clicked

Below is a custom jQuery script I put together: $(function(){ $("a img").click(function() { $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100); $("body").css({ ...

javascriptjqueryhtmlxhtml

Syntax: Implement variable for css property value

Is there a way to center a box vertically within another box using jQuery instead of CSS? I believe it's more reliable. var textH = $(".Text").height(); var vertAlign = ((140 - textH)/2); $(".Text").css({ marginTop: 'vertAlign' }); I& ...

jquerycssmathvar

Is there a way to determine if the browser window is currently in use?

The code I am currently working with looks like this: let focus; function setFocus() { focus = true; } function hideWindow() { focus = false; } window.onfocus = setFocus(); window.onblur = hideWindow(); The intention behind this code is to use it in the ...

javascripthtmlgoogle-chromegoogle-chrome-extension