How to keep a DIV from moving when page/screen size changes

#1

Newbie coder here.

I want to accomplish the following task without using flexbox.

I have 3 DIVs:

Master Container. It sets the max width and minimum height for the area.

Left Container. It will contain a 50px by 50px graphic.

Right Container. I want it span the area from the grapic to the right side of the master container.

The Issue:
The right container contains various lines of text. The problem is, once the text reaches all the way to the right side, then the entire Right Container, moved under the Left Container.

Rather than post my code and figure out what I am doing wrong – I would rather start from scratch and learn the best way to set up what I am trying to do. I am also trying to avoid using a table environment.

This container, is one of many containers that is created via dynamic content.

Any help / guidance / links would be greatly appreciated.

#2

Hi orclord1,

I agree with not using a html table if the content is not tabular, but there’s also the CSS table that styles e.g. divs as table and cells to make them behave like a table.

Clearly you have managed to get the two divs side by side. How did you do that? Divs are block elements so their default display would be stacked vertically.

Flex is the normal this days, before that we used float or inline-block for cases like this, and before that we (mis)used html tables. I guess that is what you want to avoid is it not, but why not flexbox?

The best way to set up things is to structure the html according to the content and then use CSS to style it the way you want it to display.

So what exactly are you trying to do?

1 Like
#3

There are 2 reasons I don’t want to use flexbox:

  1. I only want to use code that is fully supported by all browsers and most versions. Flexbox is still not fully supported by IE.
  2. It has taken me 2 years as a non-coder to build my site. Quite a bit of that time has been spend re-doing work when I have learned newer or more correct coding methods – its been long enough now and I want to launch the site. I currently don’t want to spend months rebuilding the site to accept flexbox.

I am using display block and in-line block.

Here is a page where I can give you an example:
https://www.minisgallery.com/index_pre.php?id=icons-of-the-realms

If you resize the page, the Set descriptions on the right, start popping below the icons on the left. (Walking Statue of Waterdeep) will be one of the first ones to do this.

Here is the code behind this (with the PHP stripped):

<div class="tabsMenuContainerSingle">
  <a href="">'
  // Create Main Tab Box
  <div class="tabContainer">

    // Create Image Box
    <div class="tabImageBox">
      <img src="" width="50" height="50" align="bottom" border=0 alt="icon">
    </div>

    // Create Info Box
    <div class="tabDetailsBox">

      // Row 1 - Tab Name
      <p class="tabDetailsNameLine">
      </p>
                            
      // Row 2 - Info 1
      <p class="tabDetailsInfoLine">
      </p>
                
      // Row 3 - Show New Info from Info3, otherwise show Info2
      <p class="tabDetailsInfoLineNew">
        <img src="" height="16" valign="bottom">
      </p>

    </div> // Create Info Box
  </div> // Create Main Tab Box
  </a>
</div>

And here is the mess that is my CSS

/* TABS MENU */
/* Container for Single Column menu of Set Tabs */
.tabsMenuContainerSingle {
    max-width: 414px; 
    height: auto;
    background: #aeaeae;
    border: 2px solid #585858;
    border-radius: 5px;
    text-align: center;
    margin: 16px auto 0; 
    /* padding: 2px; 
    display: block; 
    box-sizing: content-box;
}

/* ELEMENTS of Main Container*/

/* Title of Set */
.tabsMenuTitle {
    width: auto; 
    height: auto;
    border: 0;
    color: #620000;
    font-size: 24px;
    font-weight: bold;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
    display: block;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Container for Tab */
.tabContainer {
    border: 2px solid #620000;
    border-radius: 4px;
    height: auto;
    max-width: 407px;
    width: 100%;
    background-color: #ffffff;
    padding: 1px;
    text-align: left;
    display: inline-block;
    margin: 3px;
    vertical-align: top;
    box-sizing: border-box;
}
.tabContainer a:link {text-decoration: none; color: #0000ff;}
.tabContainer a:visited {text-decoration: none; color: #0000ff;}
.tabContainer a:hover {text-decoration: none; color: #0000ff; background-color: #f8c1c0;}
.tabContainer a:active {text-decoration: none; color: #0000ff;}
.tabContainer:hover {background-color: #f8c1c0;}

.tabContainerBlank {
    border: solid 2px transparent;
    height: auto;
    max-width: 407px;
    width: 100%;
    text-align: left;
    display: inline-block;
    margin: 3px;
    box-sizing: border-box;
}

/* ELEMENTS for Tab */

/* Image - 1st element on left side */
.tabImageBox {
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

/* Info Container - 2nd element on right side of Image */
.tabDetailsBox {
    /* width: calc(100% - 52px); */
    height: auto;
    display: inline-block;
    padding-left: 2px;
}

/* ELEMENTS for Tab Info Container */
.tabDetailsNameLine {
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    color: #0000ff;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    margin-top: 0;
    margin-bottom: 0;
    display: block; /* added to test */
}

.tabDetailsInfoLine {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: #000000;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    margin-top: 0;
    margin-bottom: 0;
    display: block; /* added to test */
}

.tabDetailsInfoLineNew {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: #000000;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    margin-top: 0;
    margin-bottom: 0;
    display: block; /* added to test */
    background: #ffff00;
}
#4

If you want very old school then float tabImageBox left and set tabDetailsBox to display:block and overflow:hidden. If you want ie6 support them also add zoom:1; to it :slight_smile:

However I think that’s the wrong approach as we shouldn’t be looking backwards but forwards :slight_smile:

You also have many duplicated rules so try to use the cascade more and just style the differences. You are also sizing too many things explicitly and the only element that needs a width is the wrapper. Indeed on small screens you are over constrained with the inner elements poking out the side of the parent and scrolling sideways.

e.g.A small re-jig from your code (with the code mentioned above added also).

/* TABS MENU */
/* Container for Single Column menu of Set Tabs */
.tabsMenuContainerSingle {
    max-width: 414px; 
    background: #aeaeae;
    border: 2px solid #585858;
    border-radius: 5px;
    text-align: center;
    margin: 16px auto 0;
}

/* ELEMENTS of Main Container*/

/* Title of Set */
.tabsMenuTitle {
    color: #620000;
    font-size: 24px;
    font-weight: bold;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
    padding: 1px 0;
}

/* Container for Tab */
.tabContainer,
.tabContainerBlank {
    font-size: 14px;
    border: 2px solid #620000;
    border-radius: 4px;
    background-color: #ffffff;
    padding: 1px;
    text-align: left;
    margin: 3px;
    box-sizing: border-box;
}
.tabContainer a:link {text-decoration: none; color: #0000ff;}
.tabContainer a:visited {text-decoration: none; color: #0000ff;}
.tabContainer a:hover {text-decoration: none; color: #0000ff; background-color: #f8c1c0;}
.tabContainer a:active {text-decoration: none; color: #0000ff;}
.tabContainer:hover {background-color: #f8c1c0;}

.tabContainerBlank {
    border: solid 2px transparent;
}

/* ELEMENTS for Tab */

/* Image - 1st element on left side */
.tabImageBox {
    width: 50px;
    height: 50px;
    float:left;
    padding-right:2px;
}

/* Info Container - 2nd element on right side of Image */
.tabDetailsBox {
    overflow:hidden;
    padding-left: 2px;
}

/* ELEMENTS for Tab Info Container */
.tabDetailsNameLine,
.tabDetailsInfoLine,
.tabDetailsInfoLineNew {
    font-weight: bold;
    font-style: normal;
    color: #0000ff;
    margin: 0;
}
.tabDetailsInfoLine {
    font-weight: normal;
    color: #000000;
}
.tabDetailsInfoLineNew {
    font-weight: normal;
    color: #000000;
    background: #ffff00;
}
1 Like
#5

Then don’t use css or html5. :slight_smile:

No code is supported by all browsers through all time. You have to set the bar somewhere and that should be to not support browsers that are no longer supported by their vendors.

These days most access to the internet is via mobile or tablet so you should code for modern browsers first and then apply fallbacks for less modern browsers if your audience dictates.

Supporting out of date browsers should be discouraged as they are a serious security issue as the recent ransomeware attacks have demonstrated so clearly.

Of course some fallbacks for older browsers are easy to implement but add to code weight and complexity so choose carefully :;

1 Like
#6

Thank you greatly for your help with this. I have cleaned up a lot of my code now to reduce the duplicity. I tried the changes you recommended, but this caused several issues. However, the "old “school” approach you mentioned works perfectly.

Part of what is causing the trouble, is that I use the same code to display the tabs in 2 columns. (See the index page of the link). This is why I had the display set as in-line block.

This is going to take more tinkering on my part to figure out a way to better refine it, but for now its working pretty good.

The main issue I have is that where my master containers have a max-width, the only way I can get an inner container to fill the inside is with width at 100%, however, when the window resizes, the right padding gets lost.

#7

That’s because you have the element with a width of 100% and then you give it 3px margins making it 6px too big to fit inside its container once squashed.

That’s why I advise not using widths apart from the main container because you build a very fragile structure otherwise.

The problem is that as you have built many pages this way you are a bit stuck unless you want to change to modern techniques.

You could offset the margin using calc on the width to reduce it by 6px.

e.g.

.tabContainer,
.tabContainerBlank {
    width:100%;/* fallback*/
    width:calc(100% - 6px);
}

That will fix the problem and do no harm as older browsers will just get the width that they originally had.

1 Like
#8

Thank you again PaulOB, your knowledge is most impressive. I did not know that you could use calc to subtract an amount in pixels from a % width.

1 Like