Seeking to have text spill over into a different container

Novice in CSS seeks advice.

I've nailed the layout of the home page for my website with two 

divs</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>#desktop-navbar {
   text-transform: uppercase;
   width: 100%;
   height: 90px;
   position: fixed;
   z-index:1;
}

#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
}

#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}

#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 25px;
color: #000000;
font-family: Thasadith;
font-weight: 700;
}

#desktop-navbar #mobile-menu-link{
display: none;
}

#desktop-nav-wrapper nav li:hover {
font-weight: 900;
}

#desktop-nav-wrapper.solid {
  transition: background-color 1s ease 0s;
  background-color: #eeeeee;
}

#desktop-logo.solid-fonts {
  transition: color 1s ease 0s;
  background: linear-gradient(90deg, #000 100%,  #000 0%) fixed;
  -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#desktop-nav-wrapper nav li.solid-fonts {
  transition: color 1s ease 0s;
  color: #000000;
}

#desktop-nav-wrapper {
font-weight: bold;
font-size: 18vw;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}

#home {
height: 700px;
    position: relative;
}

#home-container {
height: inherit;
width: 100%;
display: flex;
position: absolute;
}

#home-colour-one {
height: inherit;
width: 33%;
background-color: #314455;
}

#home-colour-two {
height: inherit;
width: 67%;
background-color: #dddddd;
}
<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
    <nav>
        <ul id = "desktop-nav-content">
            <li class="desktop-items"><a href="#home">Home</a></li>
            <li class="desktop-items"><a href="#about">About Me</a></li>
            <li class="desktop-items"><a href="#services">Services</a></li>
            <li class="desktop-items"><a href="#gallery">Gallery</a></li>
            <li class="desktop-items"><a href="#contact">Contact</a></li>
            <li id="mobile-menu-link"><a>Menu</a></li>
        </ul>
    </nav>
    </div>
</div>

<div id="home">  
 <div id="home-container">
<div id="home-colour-one">
<h3>Bettoo Kaozink</h3>
</div>
<div id="home-colour-two" class="container">

</div>
</div>
</div>
htmlcss

Answer №1

To tackle this issue, consider incorporating flexbox by including display: flex in the container's styling. If you're unfamiliar with flexbox concepts, I suggest delving into this informative article.

I've put together a small sample here based on your requirements. To gain a better grasp of the code, try these two enhancements in the JSFiddle:

  1. Modify the flex-grow value on line 15 of the CSS.
  2. Utilize JavaScript to center the text relative to the div-container.

Mastering flexbox provides a multitude of design possibilities once you become proficient.

I trust this solution benefits you. Otherwise, feel free to inform me in the comments section.

Answer №2

It appears that the foundation of your webpage may not be very stable, at least from what I can gather.

However, if I correctly understand your objective in this situation, and you want to have your h3 (or any text container you plan to add) floating between the two divs [id="home-colour-one" and id="home-colour-two"], and vertically centered, one solution could be incorporating the following CSS snippet:

/* ADD THIS!!!*/
#home-colour-one h3 {
position: absolute;
top:50%; left:16.5%;
transform: translateY(-50%);
}

You can view a demonstration on JS Bin here: https://jsbin.com/ralicul/edit?html,css,output

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

My React project is unable to import the foundation SCSS file into the App.scss file

After installing zurb-foundation using npm, I attempted to import the .scss file into my App.scss file. Utilizing the "live sass server" for compiling the .scss code into .css code, a .css file was generated but did not display any code despite successfull ...

cssreactjsnpmsasszurb-foundation

Inconsistency in div height caused by positioning disparities

My demonstration shows two lines that should appear equal in height, but one ends up looking thicker due to its top position. Even just adjusting the top position by 1px can make a significant difference in how they look. Is there any way to prevent this u ...

htmlcss

Determining the height of a different element using only CSS, Stylus, or Nib

Looking to create a navigation bar using CSS Markup: <nav> Navigation content </nav> <div id="mainContent"> Main page content </div> CSS: nav { position:fixed; height: X%; min-height: Ypx; } #mainContent { ...

htmlcssstylesheetstylus

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

csshtmlright-to-left

What is the process for adding elements to an object in Angular JS?

My goal is to send data to an ng-object after filling out and submitting an HTML form with user-defined values. However, after pressing submit, the values are being duplicated. I have attempted to clear the data by using $scope.user > $scope.user=&apos ...

javascripthtmlangularjs

What could be causing the absence of the box within the div element?

I am still learning the ropes of javascript, CSS, HTML and programming in general. Despite being a beginner, I have managed to grasp the basics of simple HTML and CSS. I had successfully created a nested div structure before, but suddenly the inner div is ...

htmlcss

Starting a tab just once

I have successfully created 4 static HTML pages that include: Home About Services Contact Each page contains a link that leads to another static page named myVideo.html, which plays a video about me in a new tab. The link is available on every page so ...

javascriptphpjqueryhtml

When inline elements are positioned right next to block elements

Can inline and block elements be placed on the same level without wrapping in HTML? Does it matter if they are wrapped or not? For example: <div class="name"> <span class="name__text">List name</span> </div> <div class="li ...

htmlcss

adjust the webpage to be optimized for the size of the screen

Looking to adjust the webpage layout so that it fits perfectly on the screen without the need for vertical or horizontal scrolling. Additionally, we want the image to be centered. See below for the current code snippet: #copyright { top: 0px; right: ...

htmlcss

Outputting PHP Array as an HTML Table

I need help displaying products from a specific category in an HTML table with only three columns. My current code is: <table> <?php $catagory=$_GET["q"]; $con = mysql_connect("localhost","cl49-XXX","XXX"); if (!$con) { die('Co ...

phphtmlmysqlarrayshtml-table

Maintain the fixed position of the Google Map <div> while allowing background <div>s to scroll

I'm having trouble keeping a Google Map div fixed on the screen while allowing my background, consisting of multiple scrolling divs with content inside, to scroll as normal. My attempt to wrap the map div in another fixed div resulted in the map disa ...

htmlcss

Mobile view doesn't quite center using flexbox, even though it works fine on desktop

Utilizing flexbox, the two distinct sentences that form the content of the page are centered. However, upon viewing the website on my mobile phone, the second sentence appears aligned to the left side. Here's how the site appears on a phone I've ...

htmlcssflexboxmedia-queriestext-align

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

javascriptjqueryhtmlcss

Loading Ajax dropdown with a preselected value in the dropdown menu

There are two pages, each containing a form. Page 1 - Form A) Includes a dropdown menu (with values populated from the database) and a continue button. <select name="form[formA][]" id="dropdown1"> <option value="1">Option 01</opti ...

javascriptphpjqueryhtmlajax

On screens with smaller dimensions, the divs intersect with each other

I have a project where I need to style each letter in its own box, arranged next to each other or in multiple rows with spacing between them. Everything looks great until I resize the screen to a smaller size or check it on mobile - then the letters in the ...

htmlcssruby-on-railsmargin

Strategies for making a child div fade out when the parent div is hovered over

I have a div with the class name ordershape and inside it, there is another div called fad-res. My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs. <div class="ordershape"> & ...

javascripthtmlcss

The style attribute transforms the background-image url quotation to become &quot;

I'm currently working on creating a catalog component that will allow me to display images, titles, and descriptions multiple times. Below is the code for this component: import React from "react"; import '../pages/UI.css'; import ...

htmlreactjsjsx

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

jqueryhtmlcsstwitter-bootstrap

Click on the button to send the input field

Below you'll find an input field and a button: <input id="pac-input" class="controls" type="text" placeholder="Search! e.g. Pizza, Pharmacy, Post office"> <button id="new" class="btn btn-success">Submit</button> Currently, when te ...

javascriptjqueryhtmlforms

The positioning of the parent element shifts as a result of the CSS

What causes a vertical position change in buttons with content floated left or right? Take this example http://jsfiddle.net/8ff6dhou/ <button>aaa</button> <button><div style="float:left">bbb</div></button> <button> ...

css