Member Avatar for Sanchixx

how can i make this div unresizable in a smaller screen size:

#space3
{
display:inline
margin:auto;
font-family:Arial;
text-align : left;
font-size:16px;
width:490px;
background-color:#f2f2f2;
border-bottom:0px;
padding-bottom:0px;
padding-top:0px;
padding-left:20px;
border-style:solid;
border-width: 1px;
border-top:1px;
border-right:0px;
right:345px;
position:absolute;
}


#space3 a
{
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 0px 0px 5px 5px;
font-family:Arial;
text-align : left;
font-size:16px;
color:#000;
padding-right:5px;
padding-left:5px;
border-style:solid;
border-width: 1px;
background-color:#f2f2f2;


}

#space3 a:hover
{
font-family:Arial;
text-align : left;
font-size:16px;
color:#000;
padding-right:5px;
padding-left:5px;
border-style:solid;
border-width: 1px;
background-color:#FCFCFC;
text-decoration:none;
border-bottom:0px;
padding-bottom:1px;
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}

I use this in this .

Edited by Sanchixx because: broken link
  • 5 Contributors
  • 7 Replies
  • 528 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Sanchixx

Dani AI

Generated

Most likely causes (short): a) your CSS has small syntax errors that can stop rules from applying, b) an inline element won’t respect a fixed width, and c) an absolutely-positioned box with a fixed offset from the viewport will “move” as the browser shrinks unless it’s positioned inside a containing element. Those points explain why setting width:490px looked like it wasn’t working even after you tried sizes — the browser was ignoring or reflowing the rule.

A practical fix (apply in order):

  1. Validate/fix CSS syntax (missing semicolons, incomplete border declarations). A single parse error can make the rest of that rule behave unpredictably.
  2. Make the box able to honor width by using display: block (or inline-block) and box-sizing: border-box so padding/borders don’t grow the box beyond the width.
  3. Wrap the page content in a positioned container and anchor the box inside that container so its offsets are relative to the page layout instead of the viewport. Use a media query to let the box revert to normal flow on small screens so it doesn’t overlap or get pushed off-screen.

Example pattern (adapt values to your layout):

/* page container */
.container { width: 980px; margin: 0 auto; position: relative; }

/* anchored box inside container */
#space3 {
  display: block;
  position: absolute;    /* now positioned relative to .container */
  left: 680px;
  width: 490px;
  box-sizing: border-box;
}

/* small screens: fall back to normal flow */
@media (max-width: 800px) {
  #space3 { position: static; width: auto; margin: 10px 0; }
}

Quick debugging tips: open DevTools (F12) and check the computed styles and which rule is overridden, temporarily give the element a bright outline/background to see its box, and reduce CSS until you find which declaration is being ignored. As and suggested, a wrapper is the right approach here; ’s max/min-width idea is useful for flexible limits, and ’s fixed positioning is only for when you truly want the box fixed to the viewport (not the page content).

Recommended Answers

All 7 Replies

Member Avatar for sway1101

I am not sure if this is the best way to do this, but you could use the

max-width:

And the

min-width:

properties of the div in your CSS file. This should limit the resizing of the div.

Member Avatar for Sanchixx

I also have an other problem depending on the browser size my div may move.
I would like it to stay in one place how can i do that?

Edited by Sanchixx because: grammer
Member Avatar for dany12

position:fixed;

Member Avatar for drjohn

For Sanchixx's moving div

don't use position:fixed, put a wrapper div around the entire content, with a suitable width, and then your div or anything else will not move. Rememeber that not everyone has a big screen nor does everyone work with the browser full screen, so think carefully about the width of your wrapper div - make is as small as practical, so accomodate a many users as possible.

for Sanchixx's div resizing

as you have a width defined for #space3, it should NOT resize when the browser's viewport size is changed. Using min-width and max-width WOULD make it resizable within the chosen limts of min and max.

Member Avatar for Sanchixx

And how do i make a wrapper, i solved the size but it still moves depending on the browser size!

Member Avatar for JorgeM

create a div that will "wrap" around your HTML content. Assign the div an ID. Then apply the style. Example:

<style type="text/css">
  #wrapper {width:800px;margin:0px auto;}
</style>

<body>

 <div id="wrapper">
  <!-- HTML Content -->
 </div>

</body>
Member Avatar for Sanchixx

It isn't working. :-(

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.