CODEWITHSUNDEEP
htmlcss
Paolo Duhaylungsod
Paolo Duhaylungsod

Reputation: 487

Need to increase box wider using CSS but changing width and length gives no effect

I have a simple webpage for my terms and conditions section that uses CSS.

However, I cannot make the blueBox wider or longer.

I tried to adjust the height and width using CSS but width and length are not changing. Can you help me out?

Here is the index page.

<div id="mainContentArea">
    <div id="contentBox">
        <div id="title">BlueBliss Inc.</div>
        <div id="linkGroup">
            <div class="link"><a href="index.html">Home</a></div>
            <div class="link"><a href="index.html">About</a></div>
            <div class="link"><a href="index.html">Portfolio</a></div>
            <div class="link"><a href="index.html">Contact</a></div>
        </div>
        <div id="blueBox"> 
          <div id="header"></div>
          <div class="contentTitle">Welcome to BlueBliss Inc.</div>
            <div class="pageContent">
              <p>This template was created for those needing a really simple site, without much content.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
              <p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
            </div>
            <div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a></div>
        </div>
    </div>
</div>

CSS

html{
  overflow: hidden;
  height: 99%;
}
body{
  height: 99%;
}
#mainContentArea{
  margin: 0 auto 0 auto; 
  display: table; 
  height: 100%;  
  position: relative; 
  overflow: hidden; 
  width: 600px;
}
.link,.linkActive{
  width:75px;
  margin-right:10px;
  float: left;
  margin-top:24px;
  text-align:center;
  font-family:Georgia, "Times New Roman", Times, serif;
  background-image:url(tab.gif);
  position:relative; bottom:0px;
}
#linkGroup{
  margin-right:10px;
  height:40px;
  width:600px;
}
#title{
  width:230px;
  height:40px;
  margin-right:20px;
  margin-top:15px;
  text-align:center;
  float:left;
}
.contentTitle{
  margin-left:15px;
  margin-right:12px;
  margin-bottom:12px;
  width:573px;
}
.pageContent{
  font-family: Arial, Helvetica, sans-serif;
  margin-left:20px;
  margin-right:20px;
  width:560px;
  height:auto;
}
#blueBox{
  position: absolute;
  vertical-align: middle;
  background-color:#E7EDF8;
  width:600px;
  clear:both;
  height:auto;
}
#header{
  width:600px;
  height:20px;
  background-color:#FFFFFF;
  background-image:url(header.gif);
  background-repeat:no-repeat;
}
#footer{
  width:600px;
  height:20px;
  background-color:#FFFFFF;
  background-image:url(footer.gif);
  background-repeat:no-repeat;
  text-align:center;
  padding-right:10px;
}
#contentBox{
  margin-top:25px;
}

Also, its limiting me to stay on its size. its not giving me the option to scroll down. please help me. thanks

Upvotes: 0

Views: 89

Answers (6)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

You have defined maximum available width at parent element:

#mainContentArea{
    width: 600px;
}

So you have not the option to go further from this 600px in width. If you want to set the width of blueBox to a value more than 600px, you should increase it on #mainContentArea element.

Also it would be far more better to hesitate from defining width property for every single element. So, please remove width declaration from these elements:

#linkGroup
#blueBox
#header
.contentTitle
.pageContent

At the end, you dont need to declare position: absolute for #blueBox, so remove it. Likewise, this part of your CSS

html{
  overflow: hidden;
  height: 99%;
}
body{
  height: 99%;
}

is more likely to be removed, if there is no special need for it to remain, as it could cause problems with your simple structure.

#mainContentArea{
  margin: 0 auto 0 auto; 
  display: table; 
  height: 100%;  
  position: relative; 
  width: 600px;
}

.link,.linkActive{
  width:75px;
  margin-right:10px;
  float: left;
  margin-top:24px;
  text-align:center;
  font-family:Georgia, "Times New Roman", Times, serif;
  background-image:url(tab.gif);
  position:relative; bottom:0px;
}

.link:hover{
  background-image:url(tab2.gif);
}

a{
  text-decoration:none;
}

.link a{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
}

#linkGroup{
  margin-right:10px;
  height:40px;
}

#title
{
  width:230px;
  height:40px;
  margin-right:20px;
  margin-top:15px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  float:left;
}

.contentTitle
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#213E74;
  font-size:19px;
  margin-left:15px;
  margin-right:12px;
  margin-bottom:12px;
}

.pageContent
{
  font-family: Arial, Helvetica, sans-serif;
  color:#000000;
  font-size:12px;
  margin-left:20px;
  margin-right:20px;
  height:auto;
}


#blueBox{
  vertical-align: middle;
  background-color:#E7EDF8;
}

#header{
  height:20px;
  background-color:#FFFFFF;
  background-image:url(header.gif);
  background-repeat:no-repeat;
}

#footer{
  height:20px;
  background-color:#FFFFFF;
  background-image:url(footer.gif);
  background-repeat:no-repeat;
  text-align:center;
  padding-right:10px;
  color:#BDCDEC;
}
#footer a{
  font-size:9px;
  color:#BDCDEC;
}

#contentBox
{
  margin-top:25px;
}
<div id="mainContentArea">
    <div id="contentBox">
        <div id="title">BlueBliss Inc.</div>

        <div id="linkGroup">
            <div class="link"><a href="index.html">Home</a></div>
            <div class="link"><a href="index.html">About</a></div>
            <div class="link"><a href="index.html">Portfolio</a></div>
            <div class="link"><a href="index.html">Contact</a></div>
        </div>

        <div id="blueBox"> 
          <div id="header"></div>
          <div class="contentTitle">Welcome to BlueBliss Inc.</div>
            <div class="pageContent">
              <p>This template was created for those needing a really simple site, without much content.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
              <p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
            </div>
            <div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a></div>
        </div>
    </div>
</div>

Upvotes: 0

Qaddura
Qaddura

Reputation: 177

I see you have this <div id="mainContentArea"> which has
#mainContentArea { margin: 0 auto 0 auto; display: table; height: 100%; position: relative; overflow: hidden; width: 661px; }

the problem is that your #blueBox is inside the #mainContentArea division, which has the property overflow set to hidden. So no matter how much you add to the #blueBox it will be hidden by #mainContentArea

Solution : remove the overflow:hidden line, you dont need it.

Upvotes: 1

Zulfiqar Tariq
Zulfiqar Tariq

Reputation: 394

The problem is that you have restricted the width of your inner div just keep the width of inner divs to 100% and it will expand. hope it will work

Upvotes: 0

David Addoteye
David Addoteye

Reputation: 1641

1) First of all remove the "position: absolute;" from the #blueBox add "height: 100%" to the following selectors a) #blueBox b) #contentBox.

Find sample Code bellow!!

.pageContent {
     font-family: Arial, Helvetica, sans-serif;
     color:#000000;
     font-size:12px;
     margin-left:20px;
     margin-right:20px;
     width:560px;
     height:100%;
    }

#bluebox {
    position: relative;
    vertical-align: middle;
    background-color:#E7EDF8;
    width:600px;
    clear:both;
    height:100%;
   overflow-y: scroll; /*Allow you to scroll inside the blue content*/
 }

Upvotes: 0

Gamsh
Gamsh

Reputation: 545

Here you put#mainContentArea width: 600px; you change the width then you will get your specification. because #blueBox is under the #mainContentArea. Then you can adjust the #blueBox height and width.

Upvotes: 0

Omari Victor Omosa
Omari Victor Omosa

Reputation: 2869

I have edited your css so that it can be responsive, it is great to work with reponsive divs. try

#mainContentArea{
	width:100%;
	 
	
	
}

.link,.linkActive
{
width:75px;
margin-right:10px;
float: left;
margin-top:24px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
background-image:url(tab.gif);
position:relative; bottom:0px;
}

.link:hover
{
background-image:url(tab2.gif);
}

a
{
text-decoration:none;
}

.link a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#linkGroup
{
margin-right:10px;
height:40px;
width:100%;
}

#title
{
width:200px;;
height:40px;
margin-right:10px;
margin-top:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
text-align:left;
float:left;
}

.contentTitle
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#213E74;
font-size:19px;
margin-left:15px;
margin-right:12px;
margin-bottom:12px;
width:100%;
text-align:center;
}

.pageContent
{
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
margin-left:20px;
margin-right:20px;
width:90%;
height:auto;
}


#blueBox
{
    position: relative;
	 
    vertical-align: middle;
    background-color:#E7EDF8;
    width:100%;
    clear:both;
    height:auto;
}

#header
{
width:100%;
height:20px;
background-color:#FFFFFF;
background-image:url(header.gif);
background-repeat:no-repeat;
}

#footer
{
width:100%;
height:20px;
background-color:#FFFFFF;
background-image:url(footer.gif);
background-repeat:no-repeat;
text-align:center;
padding-right:10px;
color:#BDCDEC;
}
#footer a
{
font-size:9px;
color:#BDCDEC;
}

#contentBox
{
margin-top:25px;
}



html, body {
text-align: center;
width:90%;
margin:0 auto;
}
p {text-align: left;}
 <head>
<title>Blue Bliss by Bryant Smith</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="bluebliss.css" />
</head>
<body>

<div id="mainContentArea">
    <div id="contentBox">
        <div id="title">BlueBliss Inc.</div>

        <div id="linkGroup">
            <div class="link"><a href="index.html">Home</a></div>
            <div class="link"><a href="index.html">About</a></div>
            <div class="link"><a href="index.html">Portfolio</a></div>
            <div class="link"><a href="index.html">Contact</a></div>
        </div>

        <div id="blueBox"> 
          <div id="header"></div>
          <div class="contentTitle">Welcome to BlueBliss Inc.</div>
            <div class="pageContent">
              <p>This template was created for those needing a really simple site, without much content.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo. Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio. Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p>
              <p>Vestibulum augue quam, interdum id, congue semper, convallis non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla tellus, pulvinar suscipit odio lorem sed pede.</p>
            </div>
            <div id="footer"><a href="http://www.aszx.net">web development</a> by <a href="http://www.bryantsmith.com">bryant smith</a></div>
        </div>
    </div>
</div>
</body>
</html>

Upvotes: 0

Related Questions