Thu, 2011-10-06 15:10
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!
Thu, 2011-10-06 17:07
#1
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.
Thu, 2011-10-06 17:31
#2
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.
Thu, 2011-10-06 17:31
#3
(accidently double posted)
(accidently double posted)
Thu, 2011-10-06 17:53
#4
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.
Thu, 2011-10-06 18:07
#5
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 
Thu, 2011-10-06 18:18
#6
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.
Thu, 2011-10-06 18:28
#7
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.
Thu, 2011-10-06 18:49
#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!
Thu, 2011-10-06 18:54
#9
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.
Fri, 2011-10-07 06:23
#10
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.