10 replies [Last post]
FlaPnthrsPunk
FlaPnthrsPunk's picture
Offline
newbie
Heathrow, Florida
Last seen: 9 years 36 weeks ago
Heathrow, Florida
Timezone: GMT-4
Joined: 2011-10-06
Posts: 7
Points: 8

Hi all,

I am currently working on this page at http://www.executivetravellink.com/cruise-deals/

I'm just finally starting to learn divs after going old school with tables for many years. This is probably a very simple question, but does anyone know to re-size the width of each div to say be only be about half of the size and only be in the vertical center third of the page? That way I can create promo images to be shown on the right third of the page.

I am assuming that I would have to go into the CSS, which was created by someone else. The code for the div titled "box" is:

.box {
border: 1px solid #4369d9;
padding:0 0 5px 0;
margin: 0 0 10px 0;
overflow: hidden;
}
.box fieldset {
border:0;
margin:0;
padding:0;
}
.box fieldset ul {
list-style: none;
margin:0 5px;
overflow: hidden;
}
.box fieldset li {
margin:0 0 5px 0;
}
.box label {
font-size:;
color: #4369d9;
}
.box input {
width: 180px;
float:left;
}
.box .button {
background: #4369d9;
color: #fff;
font-weight: bold;
padding:5px;
border:0;
font-size:;
float:right;
}
.borderradius .box .button {
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4, iOS 1+, Android 1.5+ */
border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
}
.box h4 {
background: #4369d9;
color: #fff;
margin:2px;
padding:5px;
font-size:;
display: block;
}
.box p {
font-size:10px;
margin:0;
padding: 0;
line-height:;
float: left;

Any help will be much much appreciated.

Thank You!

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 44 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hello, After having taken a

Hello,
After having taken a link of the image you shared, would you please tell us which block were you trying to have 1/2 the width and vertically centered 1/3?

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

FlaPnthrsPunk
FlaPnthrsPunk's picture
Offline
newbie
Heathrow, Florida
Last seen: 9 years 36 weeks ago
Heathrow, Florida
Timezone: GMT-4
Joined: 2011-10-06
Posts: 7
Points: 8

Thank You

Hello Mihir,

I appreciate your response.

I'm basically trying to divide the page into three vertical sections. The sidebar on the left, the center section which exists currently and extends to the right, and then a new section on the right.

FlaPnthrsPunk
FlaPnthrsPunk's picture
Offline
newbie
Heathrow, Florida
Last seen: 9 years 36 weeks ago
Heathrow, Florida
Timezone: GMT-4
Joined: 2011-10-06
Posts: 7
Points: 8

(accidently double posted)

(accidently double posted)

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 44 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

a 3 column layout

Hello,
That would basically mean a 3 column layout right? Here is a small sample.

<style type="text/css">
div#maincontainer{
width:1000px;
margin:0 auto;
overflow:hidden;
}
div#left{
width:200px;
float:left;
height:200px;
background:#333;}
div#middle{
width:600px;
float:left;
margin-left:10px;
height:200px;
background:#ccff99;
}
div#right{
float:left;
margin-left:10px;
width:179px;
height:300px;
background:#bbb;
}
</style>
 
<div id="maincontainer">
<div id="left"> </div>
<div id="middle"> </div>
<div id="right"> </div>
</div>

Is this what you were looking for? if there's anything else, let me knw!

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

FlaPnthrsPunk
FlaPnthrsPunk's picture
Offline
newbie
Heathrow, Florida
Last seen: 9 years 36 weeks ago
Heathrow, Florida
Timezone: GMT-4
Joined: 2011-10-06
Posts: 7
Points: 8

I'll try it out to see if it

I'll try it out to see if it works. Thanks so much! I really appreciate it Smile

FlaPnthrsPunk
FlaPnthrsPunk's picture
Offline
newbie
Heathrow, Florida
Last seen: 9 years 36 weeks ago
Heathrow, Florida
Timezone: GMT-4
Joined: 2011-10-06
Posts: 7
Points: 8

While that did work it's

While that did work it's purpose, it won't work with the rest of the content on the page or other pages as this "box" div is on other pages as well.

Is there any way to change the width of the "box" div to 50% of what it's size already is? That way the other 50% that isn't being used on the page can be available.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 44 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

You can use percentage widths

You can use percentage widths to be calculated, but they will be used of the parent elements and i doubt there is a code that takes 50% of the current width. Can you please create images and tell us what you are thinking about? probably i can help you out then!

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

FlaPnthrsPunk
FlaPnthrsPunk's picture
Offline
newbie
Heathrow, Florida
Last seen: 9 years 36 weeks ago
Heathrow, Florida
Timezone: GMT-4
Joined: 2011-10-06
Posts: 7
Points: 8

Interesting

Interesting. I want to show my boss whom makes the decisions on what the layout is supposed to look like what you explained and see what his response is. He's not here today, so I should be able to have more information tomorrow.

Thank you again Mihir for your help and suggestions!

FlaPnthrsPunk
FlaPnthrsPunk's picture
Offline
newbie
Heathrow, Florida
Last seen: 9 years 36 weeks ago
Heathrow, Florida
Timezone: GMT-4
Joined: 2011-10-06
Posts: 7
Points: 8

Ideal Site

Better yet. My boss really wants to model our site just like this company Thomas Cook does. http://www.thomascook.com/

See how they have that center section and the promo images on the right side? That's basically what his ideal site is. The "box" div doesn't have to be used, but that is how the previous designer seemed to start creating the site before I started here.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 44 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Simple HTML Layout Mate

Hello,
Its a very basic HTML layout mate. You should try using the code i gave and modifying it to suit your needs. See think of the "divs" as blocks. You can give height , widths to them to reach the size you want. Its just like placing building blocks next to each other. All you have to do is style them in that way.

Try just doing a small hand sketch and you will understand which block needs to go where.

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com