Tips for aligning and floating two text boxes (left and right) vertically in a scaling header

/* Including Amaranth Font for menu text */

@import url(http://fonts.googleapis.com/css?family=Amaranth);
 header,
a,
img,
li {
  transition: all 1s;
  -moz-transition: all 1s;
  /* Firefox 4 */
  -webkit-transition: all 1s;
  /* Safari and Chrome */
  -o-transition: all 1s;
  /* Opera */
  color: white!important;
}
/* Basic layout */

body {
  background-color: #ebebeb; 
}

ul {
 list-style-type: none none none!important;
 display: inline-block;
 vertical-align: middle;
}
li {
 display: inline;
}
img.logo {
 width: 200px;
 margin-left: 10px;
 padding-right: 10px;
}
nav {
 width: 100%;
 top: 50%;
 transform: translateY(-50%);
 position: relative;
 line-height: 100px;
}
.header ul li {
 display: inline-block;
 vertical-align: middle;
 text-transform: uppercase;
 margin-left: 35px;
 letter-spacing: 3px;
}
section.stretch {
 float: left;
 height: 1500px;
 width: 100%;
}
section.stretch p {
 font-family: 'Amaranth', sans-serif;
 font-size: 30px;
 color: #969696;
 text-align: center;
 position: relative;
 margin-top: 250px;
}
section.stretch p.bottom {
 top: 100%;
}
header {
 background: black;
 border-bottom: 1px solid #aaaaaa;
 float: left;
 width: 100%;
 position: fixed;
 z-index: 10;
 background: #7f7f7f;
 background: rgba(0, 0, 0, 0.5);
}
header a {
 color: #969696;
 text-decoration: none;
 font-family: 'Amaranth', sans-serif;
 text-transform: uppercase;
}
header a.active,
header a:hover {
 color: #3d3d3d;
}
header li {
 margin-right: 30px;
}
/* Sizes for the bigger menu */

header.large {
 height: 220px;
}
header.large img {
 width: 200px;
 height: 200px;
 margin-top: 10px;
}
header.large li {
 margin-top: 15px;
}
/* Sizes for the smaller menu */

header.small {
 height: 90px;
}
header.small img {
 width: 85px;
 height: 85px;
 margin-top: 5px;
}
header.small li {
 margin-top: 2px;
}
header.small.left {
 color: yellow!important;
 margin-top: 48px;
}
a.left {
 color: white!important;
 margin-top: 98px;
}
a.right {
 margin-left: 75%;
 color: white!important;
 margin-top: 98px;
}
<header class="large">
  <nav>
    <img class="logo" src="img/header_left.jpg" />

    <li><a class="left" href="#">Michael Beiruit</a><a class="right" href="#">Thames & Hudson</a>
    </li>


  </nav>
</header>

The website I am currently developing can be accessed at:

I aim to have the text aligned towards left and right but encounter issues when resizing the browser resulting in text being split onto separate lines.

Is there a way to avoid the text from breaking onto different lines during browser resizing?

htmlcsscss-floatvertical-alignmentscaling

Answer №1

Begin by organizing your list items within a container element like a ul

<ul>
    <li> First Item </li>
    <li> Second Item </li>
    <li> Third Item </li>
</ul>

Next, adjust the spacing between your anchor elements for better alignment

Answer №2

Implement these modifications (newly updated)

XHTML

<nav>
   <div class="left">
    <img class="logo" src="img/header_left.jpg">
  </div>
  <div class="right">
    <ul>
       <li class="lefttext"><a href="#">Michael Beiruit</a></li>
       <li class="righttext"><a href="#">Thames &amp; Hudson</a></li>
    </ul>
</nav>

CSS

nav{ display: inline; height:200; background-color:black; width:100%;}

nav ul{
    padding: 0;
    margin: 0 0 10px 25px;
    width: 100%;
   display:inline;
}

nav li{
    display: inline-block;

}

li.lefttext{
  float:left;
}

li.righttext{
  float:right;
}

.left {
   float:left;
   width:30%;
}

.right{
   float:right;
   width:70%;
}

VIEW LIVE DEMO

Answer №3

Avoid using <li> tags within a <nav> element.

Instead, consider using a <div> element to contain the anchor links.

<header class="large">
        <nav>
    <div class="logo-container">
      <img class="logo" src="img/header_left.jpg"></div>

            <div class="names-container">
                <a class="left" href="#">Micahel Beiruit</a>
                <a class="right" href="#">Thames &amp; Hudson</a>
  </div>
        </nav>
    </header>

To improve this code, replace inline styles with classes (such as "logo" and "names"), then define these classes in your CSS file. For example: 

.logo{ width:24%; height:100%; margin-top:220px; }
and 
.names{ float:right; width:75%; }
.

Additionally, there are errors in the CSS code provided. The selector .header ul li is incorrect as there is no element with a class of "header" or an unordered list (ul) containing list items (li). Make sure to correct these issues for proper styling.

Answer №4

Thank you everyone for your help! I was able to resolve the issue by using absolute positioning and floating the correct div to the right. The vertical-align property worked well with the left side, but caused conflicts with the right side due to its float - adjusting the line-height proved to be a useful solution. If you're facing issues with vertical alignment and floated elements, experimenting with line-height might just do the trick.

You can view the outcome by following this link: Check it out here

The only remaining concern is that when the browser window is resized to less than 530px, the left and right items start overlapping and eventually move below the logo image, causing the entire content to shift above the top of the viewport. My goal is to ensure that the logo, left, and right sections always remain on the same line regardless of the screen size. Despite trying various min-width settings on different containers, none have proven to be effective so far.

If this issue cannot be resolved here, I may have to post a new question seeking assistance.

Once again, thank you all for your support!

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

Utilizing dynamic IDs in JavaScript for HTML elements: A comprehensive guide

I am in the process of dynamically creating a drop-down box. While I have successfully created dynamic drop-down boxes, I now need to populate them with values from a database. To achieve this, I believe I need to use an on-click function. Despite attemp ...

javascripthtmldynamic

What is the best way to animate the scaling of a CSS property using jQuery?

I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...

javascriptjqueryhtmlcssjquery-animate

Utilizing JavaScript to direct website traffic within a set timeframe

I need assistance with redirecting my website on specific days each year. To be more clear, I want to redirect my site from version A to version B between March 1st and April 15th. Unfortunately, I haven't been able to find a seamless solution that d ...

javascripthtmljquerydatehttp-redirect

Establish a constant height while maintaining the original width dimensions

Is there a way to make an image maintain a specific height while also adjusting its width according to the user's screen size? Below is the CSS for the image: #cafe { max-width: 100%; height: 700px; } See the resulting output: https://i.sstatic ...

htmlcss

Is it possible to utilize a localhost set up with node.js to save all website data without using SQL or any database, only relying on HTML?

I have a question that may sound simple: is it possible to store data submitted on a textarea in a server application created with node.js? Most server side applications I've encountered involve databases like SQL, so I'm curious about this possi ...

javascripthtmlnode.js

What is the reason for Materialize CSS forms not being contained within boxes?

Is there a way to achieve a form similar to the one in Bootstrap 4 but using Materialize CSS? The current implementation only displays an underline for the input field, rather than a full containing box. <input placeholder="Placeholder" id="first ...

csshtmlmaterial-designmaterializebootstrap-4

There seems to be a disconnect between CSS and HTML

I have tried troubleshooting my code based on other examples, but I am still unable to fix the issue! For my project, I need to utilize XHTML and an external CSS file. While the HTML appears to be working fine, the CSS styles are not being applied to the ...

htmlcss

JavaScript - Unable to Modify Select Value with Event Listener

It's interesting how I can change the selected option in a dropdown list using JavaScript without any issues. However, when I try to do the same thing within an event listener, the option does not seem to change. Here's the HTML code: <select ...

javascripthtml

What is the best way to decrease the size of a SELECT element in Bootstrap 3?

Is there a way to combine form-control and input-mini classes in order to create a SELECT element with a width of around 60px and a height of approximately 20px? <select id="RoleSelect" class="form-control input-mini { width: 60px; }" runat="server"> ...

csstwitter-bootstrap

Maintain the tab order for elements even when they are hidden

Check out this demonstration: http://jsfiddle.net/gLq2b/ <input value="0" /> <input id="test" value="1" /> <input value="2" /> By pressing the TAB key, it will cycle through the inputs in order. If an input is hidden when focused, press ...

javascriptjqueryhtml

Is there a way to dynamically convert a css rule like "select::-ms-expand" to JavaScript?

Looking for assistance with implementing the following code snippet in JavaScript: "$('select').css('-moz-appearance','none');". I've tried searching on Google for solutions, but haven't been successful. Any tips or ...

javascriptjqueryhtmlcss

Smoothly scroll through divs using JQuery

Let me share an issue I'm facing. I have implemented smoothDivScrolling on my webpage. The problem is that the scrollable area containing all the items to be scrolled always ends up being larger than the actual content. When I reach the last item i ...

jquerycsshtml

What is the specific use of the second app.css file in Laravel?

I'm currently delving into Laravel 8, and I'm perplexed by the role of Resources\css\app.css. While every other component in the Resources directory serves a clear function, the app.css file appears to be empty. Even when I attempt to a ...

phpcsslaravelnpmnpm-run

The functionality of a button within an AngularJS directive is not functioning as intended

I am trying to use a directive twice on one page. Inside the directive, there is a button that should toggle between showing the two directives when clicked. However, I'm encountering an issue where the values are not changing even though the ng-click ...

javascripthtmlangularjsangular2-directives

Is there a way to position a slide container so that it is initially 10% from the left margin, and then shifts to be 10% from the right margin when it reaches the end? (Using vue-awesome

I'm facing a bit of challenge with this question, and I hope someone can help me find a solution. Currently, I am utilizing vue-awesome-swiper (). My goal is to achieve the following layout: An initial left margin of 10%: https://i.sstatic.net/AoLhK ...

javascriptcssvue.jsvuejs2swiper.js

Can anyone help me identify the issues in my PHP code?

My PHP code doesn't appear to be functioning correctly. Instead of displaying any errors, it simply shows a blank page. Can you identify what I might be doing incorrectly? <?php mysql_connect("localhost", "root", "") or die(mysql_error()); mysql_ ...

phphtmlmysqldatabase

Expanding Viewports with Dynamic Scrolling Bootstrap Columns

Striving to achieve a specific design in Bootstrap, but hitting roadblocks. The criteria are as follows: No scrolling in the browser window. Display occupying 100% of browser height. Columns for Menu, Left contents, and Right contents must scroll indepen ...

csstwitter-bootstrap

Warning using FetchContent JavaScript

I have been attempting to create an alert for the "save" button after it is clicked, but so far I have not been successful. Perfil.html Profile.html is not the main page. It is part of a dashboard. <li class="nav-item"> <a class="nav-link" ...

javascriptjqueryhtmlcssajax

What steps should I follow to make a dynamic carousel card with Bootstrap that adjusts to different screen sizes

My goal was to design a Bootstrap card with an embedded 'slideshow'. The idea was to use the second page to provide more information about the content on the first page. While editing this on the web, I managed to create a satisfactory product () ...

javascripthtmlcssbootstrap-4responsive

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss