CODEWITHSUNDEEP
htmlcss
JoeyJoeJoeJuniorShabadoo
JoeyJoeJoeJuniorShabadoo

Reputation: 389

Float a div to the right when screen is wide, stack when screen is narrow

In the code below I want the following conditions to hold:

  1. The pink div always spans the viewport.
  2. The pink div's text is always centered in the viewport.
  3. The blue div floats to the right when the screen is "sufficiently wide."
  4. The blue div stacks below the pink div when the screen is not "sufficiently wide."
  5. The blue div spans the viewport and its text is centered when stacked.
  6. The solution should be pure CSS.

Here's my current pass:

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
    position: relative;
    background-color: white;
    width: 100%;
    height:  20px;
}
#center {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-color: pink;
    text-align: center;
}
#placeholder {
    position: relative;
    height: 20px;
    width: 500px;
}
#right {
    position: relative;
    float: right;
    background-color: blue;
}
</style>
</head>
<body>
<div id="parent">
    <div id="center">This text should always be centered in the VIEWPORT</div>
    <div id="right">this text should float to the right</div>
    <div id="placeholder"></div>
</div>
</body>
</html>

Here's what it currently looks like when the screen is wide (correct):

wide

Here's what it looks like when the screen is narrow (incorrect):

narrow

Here's what it should look like when the screen is narrow:

narrow goal

Upvotes: 1

Views: 1619

Answers (3)

demo7up
demo7up

Reputation: 578

This has worked for me to keep a spinning image in the same location on each side of the screen. Adjust left / right and top to position each div on either side.

<div class="col" style="overflow: none; z-index: 9999;">
    <div id="spinning-circle" class="row" style="position:absolute; top:750px; left:-25px; z-index:1; width: auto!important;">
        <img src="../certdb/images/left-bubble.png">
    </div>
    <div id="spinning-circle" class="row" style="position:absolute; top:250px; right:-145px; z-index:1; width: auto!important;">
        <img src="../certdb/images/right-bubble.png">
    </div>
</div>

BODY ->

.Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

Page Container ->

  .Site-content {
    flex: 1;
    margin: auto;
    margin-top: 5%;
    max-width: 1500px;
    min-height: 80%;

https://jsfiddle.net/znLv6peg/11/

SCREENSHOT

Upvotes: 0

JoeyJoeJoeJuniorShabadoo
JoeyJoeJoeJuniorShabadoo

Reputation: 389

Here is my solution. I don't know if this is best. For one thing, it requires you to set explicit heights. I set the defaults for mobile and altered for large screens per a best practice I read somewhere. I noticed that if you put this in JSFiddle it doesn't work properly, but it does if you use it in a browser (only Firefox tested).

<!DOCTYPE html>
<html>
<head>
<style>
body{margin: 0;}
#parent {
    position: relative;
    width: 100%;
    height:  40px;
    text-align:center;
}
#center {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-color: pink;
}
#right {
    position: absolute;
    top: 20px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-color: #00FFFF;
}
@media only screen and (min-width: 480px) {
    #parent {
        height: 20px;
    }
    #right {
        position: relative;
        float: right;
        top: 0;
    }
}
</style>
</head>
<body>
<div id="parent">
    <div id="center">This text should always be centered in the VIEWPORT</div>
    <div id="right">this text should float to the right</div>
</div>
</body>
</html>

Upvotes: -1

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

Are you looking for something like this? https://jsfiddle.net/DIRTY_SMITH/v7k4oky8/4/

edited fiddle for proper text align

 body{margin: 0;}
    #parent {
        position: relative;
        background-color: white;
        width: 100%;
        height:  20px;
    }
    #center {
       float: left;
       margin: auto;
       width: calc(100% - 500px);
       background-color: pink;
       padding-left: 250px;
    }
    #right {
        float: left;
        background-color: blue;
        width: 250px;
    }
    @media (max-width: 610px){
        #right {width: 100%; text-align: center;}
        #center {width: 100%;}
    }

Upvotes: 2

Related Questions