Understanding floats is extremely important when creating CSS layouts. One of the trickiest issues when dealing with floats is stopping text from wrapping underneath a floated element.
Within this short tutorial, I’ll explain how this can easily be accomplished with no extra HTML markup required.
CSS layouts don’t have to be complicated but sometimes the things that should be simple and easy to do seem impossible at first.
Within this tutorial, I’ll explain how 100% height can be achieved cross browser, using CSS.
I hear about designers and developers pulling their hair out all the time saying that Internet Explorer 6 doesn’t do what they expect or that it’s adding hours to development time but is it really the huge problem that everyone makes it out to be or does it just need a little more understanding?
In this article, I’ll hopefully cover the main problems that developers experience with Internet Explorer 6 and explain the solutions for these bugs.
Fluid layouts are often shunned by designers due to the perceived lack of control of the design. If the browser window is too small then content can look squashed whilst a large browser window can lead to readability issues due to long lines of content. However, CSS provides us with possibilities to control our design whilst also giving a little flexibility for a fluid layout.
I’m sure that anyone who is involved with CSS development will have had to clear floated elements at some stage, but what different techniques can be used and more importantly which one prevails over the others?
If you haven’t already had a look at the 2 Column Fluid CSS Layout tutorial then you may want to work through that one first as this tutorial is only a slight modification of all the rules already defined for that layout and just requires a few minor adjustments.
Quite often when designing a website we’ll want to replace a heading using an image and there are various techniques to do this but what’s the best method for using a CSS image replacement technique?
Fluid layouts are often avoided by designers and developers because they’re deemed as being much more complex than fixed width layouts. However, hopefully this tutorial will encourage a few more designers to try their hand at fluid layouts and demonstrate that these kinds of layouts can be achieved easily by using CSS.
Jina Bolton’s slides from the Future of Web Design 2007 presentation are now available online to download and are definitely worth a look if you’re interested in CSS3
Probably the most interesting areas that she covers are the sections on advanced layouts and grid positioning but have a look at the presentation on her website, Creating Sexy Stylesheets as there’s some really useful examples as to how these modules will hopefully be used in the future.
This is a simple tutorial to demonstrate how easily rounded corners can be created within a webpage using HTML, CSS and four images.