Click here to Skip to main content
14,272,647 members
Rate this:
Please Sign up or sign in to vote.
See more:
In an aspx page, there is image control on the banner's right (see the simplified code below). If I drag the page's width narrow, the image control may go to another row. This happens for both Chrome and Firefox browsers, but it is OK for IE. What should I do to make the image control always on the same row as behaved in IE? Thanks.
<div class="background_tlbr"  style=" float:right; padding-removed200px; padding-removed5px;" >
   <asp:Image id="imgLogo" runat="server" ImageUrl="~/images/xxx.png" style="height:45px; width: auto"  />
Suvendu Shekhar Giri 31-Jul-15 14:48pm
What is written in background_tlbr class?
s yu 31-Jul-15 15:02pm
.background_tlbr {
background-repeat:no-repeat; overflow:hidden;
Sergey Alexandrovich Kryukov 31-Jul-15 14:50pm
It sounds to me: "it's OK for Chrome and Firefox, but makes a real trouble for IE, where the image does not go to another row". :-)
s yu 31-Jul-15 15:07pm
Re-tested. Trouble on all of the 3 browsers.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

The problem is clear, you are trying to resize the window. Which indeed, shortens the width and height (in your case only width is to be discussed) of the browser's viewport.

When you shorten the page, the element moves to the next line, because there is not enough space for the element to be rendered on that row. Thus, it moves to the next row. In such cases, it is better to use CSS3 media queries. This way, you will be able to create a separate theme for your elements in different screen sizes. For example:

//  default settings; I won't talk about them
@media screen and (max-width: 300px) {
   // style for cases where screen is only 300px wide

In the media case, you can change the layout of your elements or decrease their paddings, margins and widths so that they can fit into that space. I would also recommend that you try to use the developer tools and check into how elements are resized when your viewport resizes. Try pressing F12 and then check how resolution and elements are rendered. It would at least give you an idea of what is going on.

For more, please read CSS Media Queries on MDN[^].
s yu 31-Jul-15 15:35pm
Dear Afzaal: Your reference is helpful. I have tried different scenarios. However, I could not figure out how. The problem still exists. Wish you can help more. Thanks.
Afzaal Ahmad Zeeshan 31-Jul-15 15:41pm
The problem is only with the size of the box of the element. Try ensuring there is enough space for the box to stay in that row, otherwise it would always move to the next row to fill. Try using percentages for width. You will understand then. :-)
Sergey Alexandrovich Kryukov 31-Jul-15 17:30pm
Afzaal Ahmad Zeeshan 1-Aug-15 1:50am
Thank you, Sergey.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100