CODEWITHSUNDEEP
csshtml
Mauro Bilotti
Mauro Bilotti

Reputation: 6262

HTML5/CSS: How to prevent stacking inside a div?

I suppose that this is already in some topic, but I couldn't find the answer that I'm looking for. I have a header that looks like this:

enter image description here

And its code is the following one:

<header>
    <section id="login">
        @Html.Partial("_LoginPartial")
    </section>
    <div class="content-wrapper">
        <div class="float-left" id="image-maintitle">
            <img src="~/Images/DirecTV.jpg" width="70" height="43" />
            <div id="main-title">
                <h1 class="site-title">@Html.ActionLink("Disponibilidad de Señal", "Index", "Home")</h1>
            </div>
        </div>
        <div class="float-right">
            <nav>
                <ul id="menu">
                    <li>
                        <a href="@System.Web.Configuration.WebConfigurationManager.AppSettings["SPDCSSUrl"]" target="_blank">Ir a sistema de monitoreo</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

The problem is that both div are stacking when I reach a width of 850px, like you can see in this image:

enter image description here

I tried setting up a min-width in content-wrapper class or in "header" tag, but isn't working. The strange thing is that when I try to select "inspect element" of this div on the browser, I can't do it... only I can do it with the elements on the inside.

Here is my CSS document of this classes:

.float-left {
    float: left;
}

.float-right {
    float: right;
}

header, footer, hgroup,
nav, section
{
    display: block;
}

ul#menu
{
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 15px 0 0 0;
    text-align: right;
}

.content-wrapper {
    min-width: 1000px !important;
}

I want to hide the right div behind the scrollbar when its container reaches 1000px of width.

Is there another way to prevent this behavior?

Upvotes: 1

Views: 4204

Answers (3)

CRiv
CRiv

Reputation: 41

You may need to set the CSS display property correctly.

Try display:inline-block; or display:block; in the css for each of the elements.

Also setting the max-width:1000px; in the right div

to do this inline use <div style="display:block">

Edit after seeing the Css: Try changing the widths to suit your setup

.float-left {
float: left;
position:relative;
width:80%;
}

.float-right {
    float: right;
    position:relative;
    width:20%;
}

Upvotes: 0

TylerH
TylerH

Reputation: 21073

Have you tried max-width instead of min-width? min-width specifies things you want to show if the window is a certain size or larger, whereas max-width specifies things you want to show if the window is at a certain size or smaller.

Upvotes: 0

Charles Ingalls
Charles Ingalls

Reputation: 4561

Just set a media query to the "right div", like this:

@media (max-width: 1000px) {
    #right-div {
       display: none;
    }
}

This will only show the right div when the screen resolution is > 1000px in width.

Upvotes: 2

Related Questions