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 page.

Edited by Sanchixx because: broken link
  • 5 Contributors
  • 7 Replies
  • 518 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Sanchixx
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.