React CSS. Why is one div floating to the right

pc510 · December 11, 2023, 4:32am

The navy div with the rewards information is floating to the right. I want it to be better aligned with the white div with the search bar.

Any ideas why?

* {
    margin: 0;
    padding: 0;
}

.header {
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.headerContainer {
    padding: 20px;
    width: 100%;
    max-width: 1024px;
    /* margin: 10px 0px 100px 0px; */
        margin: 10px auto 100px;
}

.headerList {
    display: flex;
    gap: 50px;
}

.headerListItem {
    display: flex;
    align-items: center;
    gap: 15px;
}

.headerListItem.active {
    border: 1px solid white;
    padding: 15px;
    border-radius: 15px;
}

.headerTitle {
    margin: 20px 0px;
}

.headerBtn {
    background-color: maroon;
    color: white;
    border: none;
    font-weight: 500;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 20px;
}

.headerBtn:hover {
    background-color: maroon;
}


.headerSearch {
    margin-top: 10px;
    font-size: 20px;
    padding: 15px;
    max-width: 800px;
    max-width: 100%;
    height: 50px;
    background-color: white;
    color: red;
    border: 3px solid black;
    border-radius: 15px;
    text-align: center; 
    margin-top: 10px;
    margin: 0 auto;
}

.headerIcon {
    color: red;
}

.headerSearchInput{
    border-radius: 15px;
}

.headerSearchInput,
.headerSearchText {
    flex-grow: 1; 
    margin-bottom: 15px;
    margin-left: 10px; 
    font-size: 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.headerSearchInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.promoText,
.headerSearch {
    width: 100%;
    max-width: 800px; /* Adjust the max-width as needed */
    /* margin: 0 auto; */
}

.promoText {
    background-color: navy;
    margin-top: 50px;
    padding: 20px;
    color: yellow;
    border-radius: 15px;
    align-items: center;

}


.promoTextInner {
    display: flex;
    justify-content: space-between;
}
 
.promoButton {
    background-color: yellow;
    color: navy;
    border: none;
    font-weight: 500;
    padding: 10px;
    cursor: pointer;
}

.promoButton:hover {
    background-color: yellowgreen;

}

type or 
const Header = () => {
    return ( 
        <div className="header">
            <div className="headerContainer">
            <div className="headerList">
                <div className="headerListItem active">
                <FontAwesomeIcon icon={faHotel} />
                <span>Hotels</span>
                </div>

                <div className="headerListItem">
                <FontAwesomeIcon icon={faPlane} />
                <span>Flights</span>
                </div>

                <div className="headerListItem">
                <FontAwesomeIcon icon={faCar} />
                <span>Transport</span>
                </div>

                <div className="headerListItem">
                <FontAwesomeIcon icon={faCampground} />
                <span>Experiences</span>
                </div>

            </div>

            <h1 className="headerTitle">Book your dream vacation!</h1>
            <button className="headerBtn">Sign In/Register</button>


            <div className="headerSearch">
                <div className="headerSearchInner">
                <div className="headerSearchItem">
                    <FontAwesomeIcon icon={faLocationDot} className="headerIcon"/>
                    <input type="text" placeholder="Where are you going?" className="headerSearchInput"/>
                </div>
                <div className="headerSearchItem">
                    <FontAwesomeIcon icon={faCalendarDays} className="headerIcon"/>
                    <span className="headerSearchText">dat to date</span>
                </div>
                <div className="headerSearchItem">
                    <FontAwesomeIcon icon={faBed} className="headerIcon"/>
                    <span className="headerSearchText">2 adults 0 children 1 room</span>
                </div>
            </div>

            <div className="promoText">
                <div className="promoTextInner">
                    <div className="promoTextInnerContent">
                        <FontAwesomeIcon icon={faHotel} />
                    </div>
                    <div className="promoTextInnerContent">
                        Join our rewards program for more deals.
                    </div>
                    <div className="promoTextInnerContent">
                        <button className="promoButton">Sign Up for Rewards</button>
                        
                    </div>                
                </div>
            </div>


            </div>
            </div>
        </div>
     );
}
 
export default Header; code here

bbsmooth · December 11, 2023, 6:16am

It would be a lot easier to help you if we could see this in action. Do you have a link to a live version? Or to a github repo?

DanielHuebschmann · December 11, 2023, 9:40am

Yes, please.

I might me the space-between in the div that’s causing the shift, but that’s a poke in the dark without active code.

Best present code that uses React or other frameworks in an interactive environment like CodePen. Also in frameworks sometimes bugs can’t be discovered in the code, only in the console error messages.

Thanks!

pc510 · December 11, 2023, 5:35pm

Sure here is the GitHub repo: GitHub - paulcap510/reactproblem .

lasjorg · December 11, 2023, 6:14pm

You have the promoText element inside the headerSearch element which I’m pretty sure you do not want.

headerSearch has a left/right auto margin that is missing from promoText

Instead of using max-width and auto margin on the two elements I would give them a shared container and put the width limit and centering on that container.

pc510 · December 11, 2023, 7:29pm

Both promoText and headerSearch are inside headerContainer. I was able to push the promoText over by giving it a negative -20 margin-left and making it a bit wider, but I still don’t think this is an ideal solution.

* {
    margin: 0;
    padding: 0;
}

.header {
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
}

.headerContainer {
    padding: 20px;
    width: 100%;
    max-width: 1024px;
    margin: 10px 0px 100px 0px;
}

.headerList {
    display: flex;
    gap: 50px;
}

.headerListItem {
    display: flex;
    align-items: center;
    gap: 15px;
}

.headerListItem.active {
    border: 1px solid white;
    padding: 15px;
    border-radius: 15px;
}

.headerTitle {
    margin: 20px 0px;
}

.headerBtn {
    background-color: maroon;
    color: white;
    border: none;
    font-weight: 500;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 20px;
}

.headerBtn:hover {
    background-color: maroon;
}


.headerSearch {
    font-size: 15px;
    padding: 15px;
    height: 40px;
    background-color: white;
    color: red;
    border: 3px solid black;
    border-radius: 15px;
    text-align: center; 
}

/* have to consider height and padding */

.headerSearchInput{
    border-radius: 5px;
    padding: 9px;
}



.headerSearchInput,
.headerSearchText {
    margin-left: 5px; 
    font-size: 15px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


.headerSearchTextCal {
    cursor: pointer;
}

.searchBarBtn {
    background-color: maroon;
    color: white;
    border: none;
    font-weight: 500;
    padding: 10px;
    cursor: pointer;
}

.searchBarBtn:hover {
    background-color: red;
}

.headerSearchInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.headerSearchItem {
    display: inline-block;
    align-items: center;
    justify-content: center;
}





.headerSearch {
    width: 100%;
    max-width: 800px; 
}

.promoText {
    background-color: navy;
    margin-top: 50px;
    margin-left: -19px;
    font-size: 25px;
    vertical-align: center;
    padding: 15px;
    color: yellow;
    border-radius: 15px;
    align-items: center;
    height: 35px;
    width: 100%;
    max-width: 1500px;
    border: 3px solid yellow;
}



.promoTextInner {
    display: flex;
    justify-content: space-between;
}
 
.promoButton {
    background-color: yellow;
    color: navy;
    border: none;
    font-weight: 500;
    padding: 10px;
    cursor: pointer;
}

.promoButton:hover {
    background-color: yellowgreen;

}

.headerIcon {
    vertical-align: middle;
    font-size: 20px;
    vertical-align: center;
}

.date {
    position: absolute;
    top: 0;
}


/* options */
.options {
    background-color: white;
    border: 1px solid black;
    color: black;
    border-radius: 5px;
    position: absolute;
    top: 171px;
    right: 240px;
}

.optionItem {
    display: flex;
    width: 200px;
    justify-content: space-between;
    margin: 10px;
}

.optionCounter {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: blue;
}

.promoTextInnerContentIcons {
    justify-content: space-between;
    display: flex;
    gap: 20px;
}

lasjorg · December 11, 2023, 7:56pm

Yes, but promoText is inside headerSearch where it can’t belong seeing as the headerSearch element has a white background color and is 50px in height. I can’t see that as being an intentional container for promoText

Inspect the DOM if you can’t see it in the markup.

DOM

That is (almost) never the correct solution. Negative margins are not meant to solve issues you have created. They are mainly meant for creating overlap and sometimes for vertical adjustments, seldom are they meant to solve horizontal alignment. People usually do that when they have introduced an alignment issue unknowingly and instead of fixing the root cause they treat the symptom.

system · June 11, 2024, 7:57am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Can't get nav-bar to align right HTML-CSS	8	21026	May 31, 2021
Align list items to right for navbar HTML-CSS	2	42427	January 16, 2021
A div not staying on the same line of the float: left div HTML-CSS	4	1341	January 25, 2021
CSS help in React	6	560	June 1, 2021
Responsive web designn	3	386	January 17, 2021

React CSS. Why is one div floating to the right

Related topics