Mixing block and inline elements with CSS 1

theniteowl · Feb 2, 2006

Hi All,
I am working on a calendar.
I want to have boxes for Mon-Friday of equal sizes and at the end of the row have two half heigh boxes for Sat/Sun.
Saturday would be over top of Sunday like this.

__________________________________________
Mon |Tue |Wed |Thu |Fri |Sat |
| | | | |______|
| | | | |Sun |
______|______|______|______|______|______|

I am having trouble getting the Sunday element to position underneath Saturday rather than wrapping to the next line.

What is a good approach for something like this?
I will be dynamically generating the days from code so the preferable approach is if the positioning can be handled entirely with the CSS without having to set any positioning from code.

Thoughts?
It might be easy but I am just learning CSS.
Thanks.

Stamp out, eliminate and abolish redundancy!

LFI · Feb 2, 2006

This looks "decent" in IE6, but it doesn't work in Opera or Firefox. 'not sure why (other than to state that some of these are IE-specific styles or that I need a particular DOCTYPE line). Perhaps someone else can comment.

Code:

<html>
<head>
<style>
.weekday{
 display:inline;
 width:16.7%;
 border-right:solid 1 black;
 border-top:solid 1 black;
 height:50px;
}

#Sat{
 border-top:none;
}

.weekend{
 display:block;
 border-top:solid 1 black;
 height:25px;
}

.week{
 display:block;
 border-left: solid 1 black;
 border-bottom: solid 1 black;
}
</style>
</head>
<body>
<div class='week'>
<div class='weekday'>Mon</div>
<div class='weekday'>Tues</div>
<div class='weekday'>Wed</div>
<div class='weekday'>Thurs</div>
<div class='weekday'>Fri</div>
<div class='weekday'>
 <div class='weekend' id='Sat'>Sat</div>
 <div class='weekend'>Sun</div>
</div>
</div>
</body>
</html>

I don't give all the DIV's ID's just to speed up my typing. Notice the way I wrapped the weekend days inside of a weekday DIV. I think that is the key idea to getting this to work for you.

'hope that helps a little.

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]

theniteowl · Feb 2, 2006

That's what I was missing. Wrapping the Sat/Sun elements did it, I just have to re-work my CSS a bit for things to line up the way I want them to and adjust borders, margins, etc but I think this will do it for me.

Thanks much. I might have played with it for hours before trying to wrap them inside another div and depending on what other changes I had made during testing it might not have had a good result even then.

Thanks LFI. I WILL get the hang of CSS. One of these days I might even read something about it other than just referencing individual properties. That would be a novel approach.

Stamp out, eliminate and abolish redundancy!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Mixing block and inline elements with CSS 1

theniteowl

Programmer

LFI

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor