Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old December 6th, 2012, 08:55 PM
Authorized User
Points: 132, Level: 2
Points: 132, Level: 2 Points: 132, Level: 2 Points: 132, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2012
Posts: 25
Thanks: 3
Thanked 0 Times in 0 Posts
Question Trouble formatting divs using CSS float command

I am trying to format some divs on my webpage using CSS. I am trying to float left that are themselves in a container div (Three equaly spaced boxes within a box). I have been unable to get the three divs to be spaced equally in the conatiner div. I did the calculations so that each of the three divs are equal width. I also took into consideration the borders that I put around them. Each border is styled using pixels. If someone could help me so I could get these divs looking they way I want them, I would apperciate it.

Thanks,
Truck35
Reply With Quote
  #2 (permalink)  
Old February 3rd, 2015, 05:01 AM
Registered User
Points: 12, Level: 1
Points: 12, Level: 1 Points: 12, Level: 1 Points: 12, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2015
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default Trouble formatting divs using CSS float

are define the div following format

Html

<div id="wrapper">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
Quote:
css:

#c1, #c2, #c3 {
width: 33%; // 1/3 of 100%
}
Reply With Quote
  #3 (permalink)  
Old February 3rd, 2015, 02:17 PM
Registered User
Points: 6, Level: 1
Points: 6, Level: 1 Points: 6, Level: 1 Points: 6, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2015
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hey Truck35. mathssjohn is spot on. I might suggest using one class instead of separate id's for efficiency that way you only need one definition:
(Also, if you are having trouble floating the elements, remember that the parent container should be positioned "relative".)
.wrapper {
position:relative;
width: 600px;
min-height:600px;
}
.oneThirdWidth {
float:left;
width:33.3%;
}

<div class="wrapper">
<div class="oneThirdWidth">Div#1</div>
<div class="oneThirdWidth">Div#2</div>
<div class="oneThirdWidth">Div#3</div>
</div>

Last edited by GuinnessShawn; February 3rd, 2015 at 02:21 PM.
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS - float property stormage BOOK: Beginning ASP.NET 4 : in C# and VB 1 October 17th, 2011 11:39 PM
Formatting CSS to center Monochrome CSS SamuelMSr BOOK: Beginning ASP.NET 4 : in C# and VB 2 September 20th, 2011 03:50 AM
CSS Float Display Problem socoolbrewster CSS Cascading Style Sheets 12 October 20th, 2005 07:22 AM
CSS Float error socoolbrewster CSS Cascading Style Sheets 3 July 18th, 2005 09:25 AM
CSS Layout Divs Truce77 PHP How-To 2 March 29th, 2004 06:29 PM



All times are GMT -4. The time now is 08:14 PM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.