I'm aiming for my #OthersMain to be bursting with visible content, but I just can't seem to make it happen

Question

I'm aiming for my #OthersMain to be bursting with visible content, but I just can't seem to make it happen

How can I change the overflow property from hidden to visible in OthersMain?

body, html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
* {
box-sizing: border-box;
}

/* Home.html */

#LeftMainSection {
background-color:#FFA500;
width: 180px;
height: 100%;
display: inline-block;
float: left;
margin-left: -180px;
animation: LeftMove 1s;
animation-fill-mode: forwards;
    border-right:10px solid black;
}
#LeftMainSection a {
padding-top: 9px;
text-align: center;
text-decoration: none;
color: black;
background-color:rgba(153, 99, 0, .6);
width: 180px;
height: auto;
    padding:10px;
display: block;
    border-bottom:10px solid black;
    border-right:10px solid black;
}


@keyframes LeftMove {
0% {
margin-left: -180px;
}
100% {
margin-left: 0;
}
}
#BorderBottomBlack {
border-bottom: 10px solid black;
}
#BorderTopBlack {
border-top: 10px solid black;
}
#RandomInfo {
text-align: center;
}
#HomeMain, #OthersMain{
        text-align:center;
overflow: visible;
text-indent: 40px;
color: white;
height: 100%;
background-color:#664200;
margin-right: 245px;
margin-left: -180px;
animation: LeftMove 1s;
animation-fill-mode: forwards;
}

#OthersMain{
 font-size:.8em;
    overflow:visible !important;
}
#TopHR, #BottomHR{
    border:solid black;
 height:10px;
    background-color:black;
}
#HomeMain p{
    font-size:1.3em;
    text-align:center;
padding: 10px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/Candidate/CSSFiles/styles.css">
</head>

<body>
    <div id="LeftMainSection">
        <a id="BorderTopBlack" href="Index.html">Video</a>
        <a id="" href="Home.html">Home</a>
        <a id="" href="Bio.html">Bio</a>
        <a id="" href="Shop.html">Shop</a>
        <a id="" href="Campaign.html">About The Campaign</a>
        <a id="Others" href="Others.html">About The Other Candidates</a>
        <a id="" href="citations.html">Citations</a>
        <a id="BorderBottomBlack" href="Contact.html">Contact</a>
        <div id="RandomInfo">
            <h3>Random Info</h3> 
        </div>
    </div>
    <main id="OthersMain">
        <div id="HomeMainDivTop">
            <h2>About The Other Canidates</h2>
        </div>
        
        <div>

            <h1>Burton (Gus) Guster</h1>
            <hr id="">
            <h2 id="AboutPG">About "Gus"</h2>
            <p>Crime</p>
            <p></p>
            ...        

        </body>
</html>

I am struggling to make the #OthersMain overflow property as visible by using !important in my CSS but it's not working. Any suggestions on how to fix this issue?

html css

Answer 1

Answer №1

To ensure proper functionality, include either overflow: scroll or auto, rather than using visible. The use of !important is unnecessary in this case.

body, html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
* {
box-sizing: border-box;
}

/* Home.html */

#LeftMainSection {
background-color:#FFA500;
width: 180px;
height: 100%;
display: inline-block;
float: left;
margin-left: -180px;
animation: LeftMove 1s;
animation-fill-mode: forwards;
border-right:10px solid black;
}
#LeftMainSection a {
padding-top: 9px;
text-align: center;
text-decoration: none;
color: black;
background-color:rgba(153, 99, 0, .6);
width: 180px;
height: auto;
padding:10px;
display: block;
border-bottom:10px solid black;
border-right:10px solid black;
}


@keyframes LeftMove {
0% {
margin-left: -180px;
}
100% {
margin-left: 0;
}
}
#BorderBottomBlack {
border-bottom: 10px solid black;
}
#BorderTopBlack {
border-top: 10px solid black;
}
#RandomInfo {
text-align: center;
}
#HomeMain, #OthersMain{
        text-align:center;
overflow: auto;
text-indent: 40px;
color: white;
height: 100%;
background-color:#664200;
margin-right: 245px;
margin-left: -180px;
animation: LeftMove 1s;
animation-fill-mode: forwards;
}

#OthersMain{
 font-size:.8em;
    overflow:auto;
}
#TopHR, #BottomHR{
    border:solid black;
 height:10px;
    background-color:black;
}
#HomeMain p{
    font-size:1.3em;
    text-align:center;
padding: 10px;
}
#AboutPG{
    font-size:1.3em;
 text-align:left;
    padding: 10px;
}
#Flip {
 transform:rotateY(180deg);
}
#RightMainSection {
border-top: 10px solid black;
position: absolute;
right: 0;
top: 0;
background-color:#FFA500;
width: 250px;
height: 100%;
display: inline-block;
float: right;
}
#News1, #News2, #News3, #News4 {
background-color:#C27D00;
border-left:10px solid black;
border-bottom:10px solid black;
height: 140px;
width: 250px;

}
#itm1, #itm2, #itm3, #itm4{
    text-align:center;
 width:100%;
    height:121px;
    background-color:black;
    margin:0;
    padding:0;
}
#ShopLink1, #ShopLink2, #ShopLink3, #ShopLink4{
    text-align:center;
    color:white;
    display:inline-block;
    background-color:black;
}
#News4{
 height:150px;   
}
#News2 h1, #News3 h1, #News4 h1 {
    margin:0;
    padding:0;
 font-size:.89em;
}

#News2, #News3, #News4 {
    font-size:1.1em;
 text-align:center;
}
#myProgress {
width: 100%;
background-color: #000;
}
#myBar {
font-size: 10pt;
width: 40%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
#Percent, #pollsP {
text-align: center;
margin: 0;
padding: 0;
}
button {
position: absolute;
width: 100%;
top: 112px;
}

#tezt{
 width:50%;
    height:10px;
}
#HomeMainDivTop {
border-top: 10px solid black;
width: 100%;
height: 90px;
background-color:#C27D00;
border-bottom:10px solid black;
text-align: center;
}
#Flip{
    margin-left:10px;
}
#LeftMain, #RightMain{
 height:100%;
    width:100%;
}

#CatImg2{
      margin-right:10px;  
}
/* index.html */


#Indexh1{
    text-align:center;
 width:auto;
    height:50px;
}
#IndexA {
    display:inline-block;
 width:100%;
    height:100px;
    text-decoration:none;
    color:gray;
}
video {
    background-color:black;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}


#ClickToHome{
    z-index:99;
    background:rgba(50, 50, 50, .5);
 width:100%;
    height:100px;
    position:absolute;
    top:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/Candidate/CSSFiles/styles.css">
</head>

<body>
    <div id="LeftMainSection">
        <a id="BorderTopBlack" href="Index.html">Video</a>
        <a id="" href="Home.html">Home</a>
        <a id="" href="Bio.html">Bio</a>
        <a id="" href="Shop.html">Shop</a>
        <a id="" href="Campaign.html">About The Campaign</a>
        <a id="Others" href="Others.html">About The Other Candidates</a>
        <a id="" href="citations.html">Citations</a>
        <a id="BorderBottomBlack" href="Contact.html">Contact</a>
        <div id="RandomInfo">
            <h3>Random Info</h3> 
        </div>
    </div>
    <main id="OthersMain">
        <div id="HomeMainDivTop">
            <h2>About The Other Canidates</h2>
        </div>
        
        <div>

            <h1>Burton (Gus) Guster</h1>
            <hr id="">
            <h2 id="AboutPG">About "Gus"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p></p>
        
        </div>
        <div>
            <hr id="TopHR">
            <h1>Rickey</h1>
            <hr>
            <h2 id="AboutPG">About "Rickey"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p></p>
        
        </div>
        <div>
            <hr id="TopHR">
            <h1>Rick Grimes</h1>
            <hr>
            <h2 id="AboutPG">About "Rick Grimes"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p>sdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh...</p>
        </div>
    </main>
    
    <div id="RightMainSection">
        <div id="News2"><h1>Campaign News</h1>This just in Burton Guster, Ricky, and Rick Grimes are found to be lying in the campaign just to get ahead in the polls that Puss In Boots swept away from them.</div>
        
        <div id="News3"><h1>World News</h1>Today in America Donald Trump is talking about visiting kim jong-un with Puss in Boots by his side.</div>
        
        <div id="News4"><h1>Local News</h1>Tomorrow Puss In Boots is planning to meet with local schools to find out what kids like most about school. And what teachers want to see changed for the children's education.</div>
    </div>
</body>
</html>

Answer 2

To ensure proper functionality, include either overflow: scroll or auto, rather than using visible. The use of !important is unnecessary in this case.

body, html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
* {
box-sizing: border-box;
}

/* Home.html */

#LeftMainSection {
background-color:#FFA500;
width: 180px;
height: 100%;
display: inline-block;
float: left;
margin-left: -180px;
animation: LeftMove 1s;
animation-fill-mode: forwards;
border-right:10px solid black;
}
#LeftMainSection a {
padding-top: 9px;
text-align: center;
text-decoration: none;
color: black;
background-color:rgba(153, 99, 0, .6);
width: 180px;
height: auto;
padding:10px;
display: block;
border-bottom:10px solid black;
border-right:10px solid black;
}


@keyframes LeftMove {
0% {
margin-left: -180px;
}
100% {
margin-left: 0;
}
}
#BorderBottomBlack {
border-bottom: 10px solid black;
}
#BorderTopBlack {
border-top: 10px solid black;
}
#RandomInfo {
text-align: center;
}
#HomeMain, #OthersMain{
        text-align:center;
overflow: auto;
text-indent: 40px;
color: white;
height: 100%;
background-color:#664200;
margin-right: 245px;
margin-left: -180px;
animation: LeftMove 1s;
animation-fill-mode: forwards;
}

#OthersMain{
 font-size:.8em;
    overflow:auto;
}
#TopHR, #BottomHR{
    border:solid black;
 height:10px;
    background-color:black;
}
#HomeMain p{
    font-size:1.3em;
    text-align:center;
padding: 10px;
}
#AboutPG{
    font-size:1.3em;
 text-align:left;
    padding: 10px;
}
#Flip {
 transform:rotateY(180deg);
}
#RightMainSection {
border-top: 10px solid black;
position: absolute;
right: 0;
top: 0;
background-color:#FFA500;
width: 250px;
height: 100%;
display: inline-block;
float: right;
}
#News1, #News2, #News3, #News4 {
background-color:#C27D00;
border-left:10px solid black;
border-bottom:10px solid black;
height: 140px;
width: 250px;

}
#itm1, #itm2, #itm3, #itm4{
    text-align:center;
 width:100%;
    height:121px;
    background-color:black;
    margin:0;
    padding:0;
}
#ShopLink1, #ShopLink2, #ShopLink3, #ShopLink4{
    text-align:center;
    color:white;
    display:inline-block;
    background-color:black;
}
#News4{
 height:150px;   
}
#News2 h1, #News3 h1, #News4 h1 {
    margin:0;
    padding:0;
 font-size:.89em;
}

#News2, #News3, #News4 {
    font-size:1.1em;
 text-align:center;
}
#myProgress {
width: 100%;
background-color: #000;
}
#myBar {
font-size: 10pt;
width: 40%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
#Percent, #pollsP {
text-align: center;
margin: 0;
padding: 0;
}
button {
position: absolute;
width: 100%;
top: 112px;
}

#tezt{
 width:50%;
    height:10px;
}
#HomeMainDivTop {
border-top: 10px solid black;
width: 100%;
height: 90px;
background-color:#C27D00;
border-bottom:10px solid black;
text-align: center;
}
#Flip{
    margin-left:10px;
}
#LeftMain, #RightMain{
 height:100%;
    width:100%;
}

#CatImg2{
      margin-right:10px;  
}
/* index.html */


#Indexh1{
    text-align:center;
 width:auto;
    height:50px;
}
#IndexA {
    display:inline-block;
 width:100%;
    height:100px;
    text-decoration:none;
    color:gray;
}
video {
    background-color:black;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}


#ClickToHome{
    z-index:99;
    background:rgba(50, 50, 50, .5);
 width:100%;
    height:100px;
    position:absolute;
    top:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/Candidate/CSSFiles/styles.css">
</head>

<body>
    <div id="LeftMainSection">
        <a id="BorderTopBlack" href="Index.html">Video</a>
        <a id="" href="Home.html">Home</a>
        <a id="" href="Bio.html">Bio</a>
        <a id="" href="Shop.html">Shop</a>
        <a id="" href="Campaign.html">About The Campaign</a>
        <a id="Others" href="Others.html">About The Other Candidates</a>
        <a id="" href="citations.html">Citations</a>
        <a id="BorderBottomBlack" href="Contact.html">Contact</a>
        <div id="RandomInfo">
            <h3>Random Info</h3> 
        </div>
    </div>
    <main id="OthersMain">
        <div id="HomeMainDivTop">
            <h2>About The Other Canidates</h2>
        </div>
        
        <div>

            <h1>Burton (Gus) Guster</h1>
            <hr id="">
            <h2 id="AboutPG">About "Gus"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p></p>
        
        </div>
        <div>
            <hr id="TopHR">
            <h1>Rickey</h1>
            <hr>
            <h2 id="AboutPG">About "Rickey"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p></p>
        
        </div>
        <div>
            <hr id="TopHR">
            <h1>Rick Grimes</h1>
            <hr>
            <h2 id="AboutPG">About "Rick Grimes"</h2>
            <p>Crime</p>
            <p></p>
            <p>Economy</p>
            <p></p>
            <p>Education</p>
            <p>sdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh...</p>
        </div>
    </main>
    
    <div id="RightMainSection">
        <div id="News2"><h1>Campaign News</h1>This just in Burton Guster, Ricky, and Rick Grimes are found to be lying in the campaign just to get ahead in the polls that Puss In Boots swept away from them.</div>
        
        <div id="News3"><h1>World News</h1>Today in America Donald Trump is talking about visiting kim jong-un with Puss in Boots by his side.</div>
        
        <div id="News4"><h1>Local News</h1>Tomorrow Puss In Boots is planning to meet with local schools to find out what kids like most about school. And what teachers want to see changed for the children's education.</div>
    </div>
</body>
</html>

I'm aiming for my #OthersMain to be bursting with visible content, but I just can't seem to make it happen

Answer №1

Similar questions

Is it possible to display a div when hovering over it and have it remain visible until

expanding menu options in a dynamic design

Incorporating a teaser of a webpage into an <a> tag linking directly to the page

Sharing data between different JavaScript files using Knockout.js

The layout is disrupted due to an input field with a label in Semantic UI

Using Python and Selenium to upload files without utilizing an 'input' HTML element

Adjusting Window Size Causes White Space to Appear Above Div

When a hover effect occurs beyond the button's boundaries

When you hover over the text, the color will shift

Space around the flex container

Using Node.JS, Sequelize, and Moment.JS to format dates

Transform your CSS3 rotateY into PHP Imagick::distortImage

Sleek design featuring a header, footer, Left Menu, Content, and RightMenu implemented on Bootstrap 4-5

Addressing the spacing and alignment issues within the progress bar

What are the steps to create a button with similar design using css3?

Embedding external javascript within another javascript file

Storing user input in an existing text file using ASP.NET MVC

attempting to display an element using jQuery that belongs to the identical class

Modify only the visual appearance of a specific element that incorporates the imported style?

execute the function based on the given ID