Good evening,
I was wondering what the best way to go around getting this picture to be a reality on my website with CSS. The easiest way I can think to do it is using a table but as we all know, tables are evil.
I know about floating left and right and such, but I can only really think of that managing two, maybe three columns and I'd like an indefinite amount. I've also seen ways of positioning absolutely from the left and right edge and such like, but I'd like them to be able to stretch, grow and move depending on the size of the web page.
Thanks,
Harry
<div style="float: left; padding: 10px; border-style: dotted;">div1</div>
<div style="float: left; padding: 10px; border-style: dotted;">div2</div>
<div style="float: left; padding: 10px; border-style: dotted;">div3</div>
<div style="float: left; padding: 10px; border-style: dotted;">div4</div>
<div style="clear: both;"></div>
EDIT: if you wanna do it with flot right instead you must swap the order of the div's namings div4 div3 div2 div1
Related
Ok so let me see if I can make sense here. I am lining 3 circles in a straight line. This happens in two places on the main page of the site. I coded the first section and it lined my circles perfectly, I copy and pasted the EXACT SAME CODE and now my first line is completely messed up but the second works perfect. To cover some bases, they are classes, not id's so that is not the issue. I have quadruple checked my brackets, spelling and any other minor incident and those are all fine as well. I am going insane here. Please if anyone could lend a hand or suggestion I would be forever grateful.
Oh and the circles are images if that helps with any needed information.
<div id="pages">
<div class="projects"><img src="images/projects.png" alt="projects" align:"right"></div>
<div class="services"><img src="images/services.png" alt="services" align:"middle"></div>
<div class="team"><img src="images/team.png" alt="team" align:"left"></div>
</div>
<div id="contact">
<h1>Contact Us</h1>
<div class="email"><img src="images/email.png" alt="email" align:"right"></div>
<div class="phone"><img src="images/phone.png" alt="phone" align:"middle"></div>
<div class="business"><img src="images/business.png" alt="business" align:"left"></div>
</div>
.projects{
float: left;
margin: 100px 75px 75px 300px;
}
.services{
float: left;
margin: 100px 75px 75px 75px;
}
.team{
float: right;
margin: 75px 200px 75px 75px;
}
.phone{
float: left;
margin: 100px 75px 75px 300px;
}
.email{
float: left;
margin: 100px 75px 75px 75px;
}
.business{
float: right;
margin: 75px 200px 75px 75px;
}
With out looking at the HTML code its hard to tell what are the errors.But the most common mistake,which even the pros make sometimes, is that we forget to change the id of the html tags when we copy from one place to another. I assumed this could be the error in your HTML code,since the second line work perfectly good and the first one does not.
Try changing the ID may be it would help and also check that you have giving proper name to class.
Might I recommend something else besides align to accomplish your goal? I see that you have things left, right and center. What place is center+left to the browser, or left+left positioning? Try taking align out of the class or the local tag. This is the golden ticket http://www.w3schools.com/. http://www.w3schools.com/css/css_positioning.asp I suggest trying a look or a two at other tags that accomplish layout.
I need to make three equal height columns with varying amounts of content with rounded corners. the corners need an 8px border radius. I would prefer to accomplish this with pure CSS if possible.
Right now my html looks like this:
<div class="col-w">
<div class="col-h col-1">
<h2>About Us</h2>
<p>Founded in 1995 in Atlanta, Georgia, The Creative Circus is an accredited, two-year, portfolio-building, educational program for the creative side of the Advertising, Interactive Development, Design and Photography industries. Located in an energetic, converted warehouse that feels more like an agency, design firm or studio than a traditional school, future creatives build portfolios that help them land the best jobs in the field.</p>
<p>Find out more about us.</p>
</div>
<div class="col-h col-2">
<h2>Admissions</h2>
<p>The Creative Circus is committed to seeking out and enrolling applicants of high standard. Our school follows a selective admissions process which includes a required admissions interview and portfolio submission. Admission is based on your commitment and dedication to your field of interest as determined by an admissions interview. This selection process allows us to provide a unique creative learning environment filled with the “best-prepared, most avidly sought-after creatives in the industry.”</p>
</div>
<div class="col-h col-3">
<h2>Programs of Study</h2>
<p>Since 1995, we’ve seen a lot of changes. But through all the trends, we still have one mantra – concept is king. Whether you come for Art Direction, Copywriting, Design, Image or Interactive Development, original ideas are what get you hired.</p>
<p>For more information about what we teach and why, please download our Course Catalog</p>
</div>
</div>
and my CSS looks like this:
div.col-w {
overflow: hidden;
}
div.col-w.col-b {
font-size: 0;
height: 8px;
}
div.col-w div.col-h {
background-color: #FFF;
border: 8px solid #B2A68E;
-moz-border-radius: 8px;
border-radius: 8px;
float: left;
margin-bottom: -9000px;
margin-right: 5px;
padding: 10px 10px 9010px;
width: 29%;
}
My bottom borders are all messed up. Any suggestions?
Here is a quick magic prototype for you: http://jsfiddle.net/6nVdT/
The point is: to use wrappers as a faux boxes, and positioning the columns over them.
There are a lot of things to improve, but you must get the idea.
This demo works also
http://jsfiddle.net/BMCT3/1/
http://jsfiddle.net/BMCT3/
Terry Riegel
Well you could start with creating 3 columns, within a wrapped DIV.
#3colWrap{ width: 900px; }
.col{ width:300px; height:500px; float:left; }
<div id="3colWrap">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
That should give you 3 columns side by side, with equal height in a wrapper. (wrapper may not be necessary, but keeps things from floating either on top, or below the columns.
Now you want rounded corners right?
I could give you the plethora of ways to do this, but an easy tool is located here:
http://border-radius.com/
Which your CSS should look something like:
.col{
width:300px;
height:500px;
float:left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
i do not believe IE supports this at this time, but who cares...
unless I missed anything, that should do you right.
Would you be interesting in using JavaScript for this? You could run a little piece of JavaScript to iterate through the three columns, get each of their heights, then set all of them to the highest height. I've done this before for your exact situation (wanting to even out columns with CSS3 rounded corners without setting a fixed height).
First of all, I would change your CSS like this:
div.col-w div.col-h {
background-color: #FFF;
border: 8px solid #B2A68E;
-moz-border-radius: 8px;
border-radius: 8px;
float: left;
margin-right: 5px;
padding: 10px 10px 10px;
width: 26%;
}
Using CSS on its own, there isn't a way to force the three columns to be the same height. You could use a min-height or height to force them all to have the same height. However, the problem with this especially in your case is that you have a liquid layout so the height you choose could either be too short or too tall, depending on the size of the window.
Edit: There is a way to make columns look like they are the same width using CSS: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
You can use javascript to force the three columns to take an equal height. Here's an example of a jQuery plugin: http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
I have to show a list of divs in a seamless order, thought their heights may vary.
Here's an example:
As you can see, when an element is floated to the left and is positioned next to another float it generates a white space until the next float. This doesn't happen the other way around. I can't seem to find a way around this and as I use javascript to filter out certain elements (divs) I can not create two different columns.
Here's the html/css:
<div style="width: 200px;">
<div style="float: left; width: 50%; background-color: green;">
<p>Float1</p>
</div>
<div style="float: left; width: 50%; background-color: blue;">
<p>Float2</p>
<p>expanded</p>
</div>
<div style="float: left; width: 50%; background-color: yellow;">
<p>Float3</p>
<p>expanded</p>
</div>
<div style="float: left; width: 50%; background-color: gray;">
<p>Float4</p>
</div>
<div style="float: left; width: 50%; background-color: red;">
<p>Float5</p>
</div>
</div>
Any ideas how to get it to look so that Float1 and Float3 don't have empty room between them?
In your example it might be possible using float:left for the uneven blocks and float:right for the even ones but in general this is not possible using just css. You will need javascript or 2 separate columns (or a combination...).
As you are using javascript already, it would be pretty easy to load all visible blocks in an array and divide them over two columns.
It seems that toggling float:left; and float:right; does what you want: http://jsfiddle.net/cELff/1/
Try using display: inline-block instead of float: left.
appreciate this q is old, for others that find this in a search ( like I was searching ).
the reason for the space is the heights. try setting a height on the floated items.
If you had a look at this forum http://python-forum.org/pythonforum/, you could notice that borders which Topics and Posts divs have are short. I am writting a forum and now have a problem with blocks which must go side by side (just like those four at the above mentioned forum). Could you please help me arrange four blocks side by side so that my forum wouldn't have that sort of shortness.
You should use tables.
There are only a few cases in which the use of a table is allowed (if you go by the semantic html rules), and this is one. The overview of forums, amount of posts and views, last poster, etc is a set of tabular data. It's safe and perfectly acceptable to use tables.
The <dl> element however was not intended to be used in this way.
This is the CSS style of the <dd> element that you are requesting:
UL.topiclist DD
{
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 4px;
BORDER-LEFT: #ffffff 1px solid;
PADDING-TOP: 4px
}
The important one to get it side by side is FLOAT: left;.
The short vertical line, is just the border-left.
If you want two divs to be side-by-side, you could try using inline-block:
<style>
#div1, #div2 {
display: inline-block;
}
</style>
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
</div>
I have read several articles regarding templates for web site content. They all seem to recommend that the columns should be placed on your site via floats. Example:
<div id="container" style="width: 1000px;">
<div id="main_content" style="border: solid 1px Black; width: 798px; /* width = 800px -2px for border */ float: left; height: 400px;" ></div>
<div id="links_menu" style="border: solid 1px Black; width: 198px; float: right; height: 600px;"></div>
</div>
However, I always manage to mangle my content whenever I use floats. I spend more time trying to determine where to put my <div syle="clear:both;" />'s than I do actually designing the look and feel of the site. Also, whenever I place one of our third party ComponentArt controls inside a floated container, it manages to get mangled and require me to specify heights and widths, which aren't determined until run time.
Furthermore, I have found that when I use absolute positioning, things seem to work out better for me. Example:
<div style="width: 1000px; height: 600px; position: relative;">
<div style="border: solid 1px Black; width: 798px; position: absolute; top: 0; left: 0; height: 400px;"></div>
<div style="border: solid 1px Black; width: 198px; position: absolute; top: 0; right: 0; height: 600px;"></div>
</div>
Anyway, I am still relatively new to Stylesheets and HTML, so I would like to throw this out there to you all to see what you think about this alternative for content placement. Do you see any negatives to this approach? I've tried in most browsers and they all seem to render correctly, but I don't know what the future holds... Or maybe, someone can recommend a better way to float my containers so that the inner content is not floated as well. I'm definitely open to suggestions, and appreciate any feedback that you can provide.
Thanks in advance for your help!CJAM
A big problem with absolutely-positioned containers is placing content on the page below them when you don't know their heights ahead of time. In your example you have defined the heights of your absolutely-positioned elements, so this shouldn't be a problem for you. If it works for you, use it.
There's really no right and wrong to achieve something with css. It's more about effectiveness/flexibility.
Using absolute-position for column layout decreases that. Inserting, removing a column will require you to recalculate all the positioning. What if there are multiple instance of the same-styled column? We can't reuse the styling 100% since it's absolutely positioned.
There's lots of approach to column layouts. Check out some #
listapart,
positioniseverything