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>
Related
I'm trying to style something to appear like a question on an exam, similar to this:
This is content that will wrap to the new line and will respect the left most div to make it appear like a question you would see on an exam.
Assuming an HTML structure like this:
<div class="header">
<div class="question-label">1. </div>
<div class="question-text">
How satisfied are you with life?
</div>
</div>
I've tried setting both .question-label and question-text to display: block; float: left; but this breaks the question text and number into different lines. JSBin
If I remove the float: left; on .question-text it would appear to somewhat work, however it doesn't respect the space under .question-number. JSBin
I know CSS questions are hard to correctly answer without seeing the final product, but how would you suggest achieving this without resorting to tables?
There are a few ways of doing this. This is my favorite:
.question-label, .question-text {
display:table-cell;
}
http://jsfiddle.net/xxzzu/
I have updated your css:
body {
width: 400px;
}
.num {
display: inline-block;
width: 40px;
/* this makes the "1." bound to the top. You can also use middle or bottom,
see http://www.w3.org/wiki/CSS/Properties/vertical-align */
vertical-align: top;
}
.txt {
display: inline-block;
width: 350px;
}
The trick is display: inline-block;
See it also here: jsFiddle
But why don't/can't you use <ol> (w3c description) ?
If I understand you right, you want to indent a whole block text.
You can try just block margin with float:
code example
I'm new to CSS tables, it's my first time. So I discovered that when you set display:table to a div, you can forgot all margin and padding (and whatever) you're planning on it's future cause they are ignored. Nice. The only property I've found to make this job is border-spacing but it is a little limited comparing with margin and padding. It have only two ways of styling, horizontal and vertical. You can't set the value of the side you want like border-spacing-left or border-spacing: 0 1px 2px 3px.
In my case, I have a table with one row that lies on the top right corner of the screen. I want it attached on the very top and spaced horizontally, which caused me problems. The top is okay but the right detaches from the border when I use border-spacing: 10px 0.
Smart guys like me don't see this as a problem, cause we can set it margin-right negatively, making it be attached again on the right side of the browser. Wow, whata smart ass I am!
However, I saw an little damn scrollbar on the bottom of the screen like a roach under your cooker at the kitchen. I hate roac.. scrollbars specially horizontals, so I got my inseticide called overflow-x and kil.. set it to hidden. She run desperately and dissapeared, but I know that she's there, somewhere staring at me. And this is driving me crazy.
Seriously now. I think this isn't the right way to do that and I hope somebody can teach me how to do it.
This is my scenario on Fiddle
Thank you in advance(mainly for reading this crap).
There are a few ways of achieving what you're trying to achieve. Most commonly, using display: table, display: table-cell, etc isn't very high on the list.
So, here's how I would do it: http://jsfiddle.net/VKnQZ/1/
Do bear in mind that I don't know the full circumstance of what you're attempting so it may well be that I'm missing a (valid) reason that you're using table display properties in the first place.
You'll notice a few things here:
I've done away with your table display properties. I don't think you need them, and floats do the job just fine (just remember to clear them).
I've removed your display from the cell divs. As someone in the comments above pointed out, divs inherit display: block by default. The additional dimensions set their size as you already had it.
I'm using the + selector to put in the spacing between elements. In this instance div + div is essentially short-hand for 'every div which is beside another div' - so all of them aside from the first.
Hopefully that achieves what you're aiming for and does away with all the nasty hacky overflow/margins/etc.
Here's the code:
HTML (only change is to remove the row div):
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS:
body {
padding: 0;
margin: 0;
}
#nav {
float: right;
}
#nav div {
float: left;
width: 120px;
height: 40px;
}
#nav div + div{
margin-left: 10px;
}
.red { background-color:#f00 }
.green { background-color:#0f0 }
.blue { background-color:#00f }
and can you tell me why are you trying to imitate table behavior when you have "table" tag? it could be styled pretty well also
what you are doing is sometimes called "divitis"
edit:
you can position table absolutely http://jsfiddle.net/n83kT/
Not too sure if this the right place to discuss float and display :)
But , flex is on his way, and display is already quiet efficient.
Display + direction and you could kick floats away.
border-spacing version : http://jsfiddle.net/GCyrillus/2EZ3F/
border-left version : http://jsfiddle.net/GCyrillus/2EZ3F/1/
<section>
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</section>
section is to set direction .. or not
unset & reset direction to fake float ,
else use text-align if you dislike this method.
In CSSheet, notice inline-table instead of table so it reacts to text-align and or direction (not all pages are EN or FR :) )
body {
padding: 0;
margin: 0;
}
section {
direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */
}
#nav {
direction:ltr;/* reset/set here if you want cells from left to right */
display:inline-table;
border-spacing: 10px 0 ;
}
#nav div {
/*direction:ltr; reset here if you want cells from right to left */
display: table-cell;
width: 120px;
height: 40px;
}
#nav div + div {
margin-left: 10px;
}
.red {
background-color:#f00
}
.green {
background-color:#0f0
}
.blue {
background-color:#00f
}
My 2 (late) cents for a different point of view :)
For completeness, I would like to offer the case for the often overlooked inline-block display type.
Similar to the use of floats, the HTML is as follows:
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
and the CSS:
#nav {
position:absolute;
top:0;
right:0;
}
#nav div {
width: 120px;
height: 40px;
display: inline-block;
vertical-align: bottom;
}
#nav div + div {
margin-left: 10px;
}
This inline-block approach behaves similarly to the floated-child-div's approach.
In this application, I can't think of a reason to use one over the other.
One minor consideration is that inline-block is not supported in some older browsers.
Otherwise, both approaches use the same mark-up and the CSS rules are similarly simple.
The choice may depend a lot on the content that you use in the #nav div elements.
Demo fiddle: http://jsfiddle.net/audetwebdesign/EVJPN/
I have a list of video thumbnails displayed on page. Of course they don't fit in one line, so multiple lines are used and I would like them to be spaced equally (in other case layout look broken). My current markup is
.thumbs {
width: 76%;
float: left;
margin: 0px 1em;
text-align: justify;
background-color: #DEE;
}
.thumb {
display: inline-block;
text-align: left;
}
markup is:
<div class="thumbs">
<div class="thumb">
<img src="http://placehold.it/160x120">
<div class="title">Test</div>
</div>
<div class="thumb">
<img src="http://placehold.it/160x120">
<div class="title">Test</div>
</div>
<!-- and so forth... -->
</div>
Same in JsFiddle: http://jsfiddle.net/cPm9f/
Everything is ok except the last row: I expect it to be spaced as previous rows, but space differs :( I can't use a table or just stuff a bunch of invisible stub elements because this is a foundation for responsive design so amount of columns displayed will be dependent
on width of device screen.
Any ideas how to make the last row space equally to previous ones?
UPD: There's opinion by cimmanon that what I want should be implemented differently. If so then how?
Your problem is the interpretation of text-align: justify. The last line is commonly not justified, because if the last line is rather short, the letters would need to have an absurd spacing.
Workaround:
text-align: justify;
text-align-last: justify;
But to my knowledge text-align-last is only supported by IE [EDIT: and Mozilla with -moz-text-align-last], so let us just fake another line of justifiable text for the others:
.thumbs:after { display: inline-block; width: 100%; content: ""; }
http://jsfiddle.net/TWgDh/
.thumb:last-child {
float:right;
}
? :)
http://jsfiddle.net/cPm9f/1/
As mentioned above, you can use that but just be aware that the last-child CSS pseudo-class isn't supported in any IE browsers below IE9. I don't know what you plan on supporting but it's worth knowing. The first-child pseudo-class, however, has some support in earlier versions of IE.
I've been teaching myself CSS, and decided to try and make a site with the knowledge I have thus far. So I decided to make a fixed navigation bar that follows the position of the web browser, and I ran into an issue. For whatever reason, one of the links I added isn't staying inside the nav bar when I change the browser window size. Can someone look at my code? Please ignore sloppiness, as I'm just trying this for the first time.
Here's my HTML. The "secondnavlinks" div id is the one that won't stay within the nav bar:
<div id="nav">
<div id="secondnavlinks">
<ul>
<li>Ambient Bookmarklet</li>
</ul>
</div>
<div id="class1">
<ul>
<li>Saved</li>
<li>Folders</li>
</ul>
</div>
<div id="header">
<img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" />
</div>
</div>
And here's the CSS:
#nav {
position: fixed;
border: 1px solid #DDDDDD;
top:-1px;
left:109px;
width:85%;
height: 46px;
background-color: white;
z-index: !important 99;
}
(Skipped over the "class1" div)
#secondnavlinks ul {
position: absolute;
display: inline;
list-style-type: none;
}
#secondnavlinks ul li {
display: inline;
text-align: center;
float: left;
font-family: klavika-light;
list-style-type: none;
position: absolute;
left: 950px;
white-space: nowrap;
}
#secondnavlinks ul li > a {
text-decoration: none;
color: inherit;
}
At first this seemed like it may be the positioning inside of the fixed element. After looking into this a little bit, I think I've found the culprit... It seems like your problem is the 'left: 950px;' - This value won't be browser independant and will vary the results / pop out the element with certain widths.
Like Libin mentioned, you want to be looking into Fluid Layout design using relational values instead of fixed values. So when you rescale your browser everything is set correctly.
Start looking into Media Queries & the use of relational values such as % and Ems.
Here's a useful resource for converting px values to ems etc: http://pxtoem.com/
Also if you want to go through tutorials / courses on the subject, I've included a couple of links below that have helped me in the past:
http://www.codeschool.com/courses/journey-into-mobile ( Check out the free first lesson )
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
http://www.css-tricks.com/css-media-queries/
Also, - Here's the proof that using absolute & relative won't pop normally inside the fixed nav bar: http://jsfiddle.net/JQT7u/2/
Good Luck!
If you are trying to make a fixed navigation bar that follows the position of the web browser, you should use % values instead of px values.
Check this demo
In that demo, I had changed the values to %, removed some position absolute etc.
Hope this is what you are trying.
check this link
Do you want like this?
It is not clear from your question how the design should be.
BTW, the links were coming out because you were giving the inside div's position:absolute. So the links were losing relation with the main div Nav.
If you want to know more about working of positioning in CSS then go through this link.
I was wondering if there were any simple examples that did the following
* A right and a left fixed column with a fluid center.
With full height and width and a header and footer.
* A single left fixed column with a fluid content column 2.
With full height and width and a header and footer.
* A single right fixed column with a fluid content column.
With Full height and width and a header and footer.
I've tried some methods (such as the ones listed on listapart) but they seemed really complicated and they used a lot of divs, or they just didn't support padding.
Thanks in advance
Check this site out:
http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm
Other layout examples from the above:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http://matthewjamestaylor.com/blog/perfect-3-column.htm
The examples you found in alistapart.com are as complicated as they need to be, and every serious example that you can find about those layouts supports padding. You will find (and already found) a lot of good examples about it in the internet, just spend some time trying to understand them and you will see that they are not so complicated, in the end.
Anyway, I have a good demo layout similar to the second you are looking for, here:
http://www.meiaweb.com/test/BMS_DM_NI/
Basically, the html is this:
<body>
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<div id="navigation">
<!-- navigation content -->
</div>
<div id="content">
<h2>Content Title</h2>
<p>
<!-- main content here -->
</p>
</div>
</div>
</body>
And the css is:
html {
overflow: auto;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
line-height: 1.5em;
}
#head {
height: 20px;
background-color: #666;
color: #AAA;
padding: 20px 20px;
}
#navigation {
width: 210px;
padding: 20px 20px;
background: #efefef;
border: none;
border-right: solid 1px #AAA;
float: left;
overflow: auto;
}
#content {
margin-left: 250px;
padding: 20px 20px;
}
I think it's simple enough, and it works in all modern browsers.
I know that it's badwrong to do, and I'm a semantic coder through-and-through (that wasn't meant to rhyme), but I still use a single layout table to do columns.
Why? It's interoperable and simple. It doesn't require ridiculous CSS hacks that just barely hold things together (seriously, floats are meant for typography, not layout). It displays identically in every browser in current use. It. Just. Works. It's a semantic hack, but sometimes you just gotta do what you gotta do.
However, there is light on the horizon. The table-* display values for CSS make equal-height columns trivial, though they can still violate source order (you still need your left-most column to be before your center column, even if it's a nav section and should come near the end of your page code). IE8, and all non-IE browsers, support these already.
CSS3 Grids and CSS3 Template Layout will both solve this issue properly, but they're still quite a bit away from being usable. A coder can dream, though, right?
You can also look at Layout Gala - 40 examples of different two and three percent and fizxed-sized column layouts.
I have reworked my sample template so you can see all three of your requested formats in action.
This is a CSS solution, no tables involved. I have set this up so the side columns are fixed width the header/footer are fixed height. Everything else is fluid.
With all modern browsers, excepting for IE7, the content is centered both vertically and horizontally. IE7 has issues with its box model. I believe IE8 have these resolved.
The center box does center vertically in IE7 because I nested a 1 cell table in the center div as a hack around IE7 box model problems. I know this is dumb and ugly but it was just to show it worked.
See it in action - Three Column Full Screen Layout
I am a bit surprised this answer did not garner a single vote or capture the bounty. It works, its simple, and it fulfills everything the OP asked for. Oh well.
The CSS
DIV { text-align: center }
#h0, #f0 { float: left; clear: both }
#h1, #f1 { height: 100px; float: none; width: 800px }
#l0 { float: left; clear: left; }
#c0, #r0 { float: left; clear: none }
#l1, #r1 { width: 150px }
#c1 { width: 500px }
#l1, #r1, #c1 { height: 350px }
#h0, #f0 { background-color: orange }
#l0 { background-color: red }
#r0 { background-color: blue }
#c0 { background-color: yellow }
#h1, #f1, #l1, #r1, #c1
{ display: table-cell; vertical-align: middle; }
The HTML
<div id="h0"><div id="h1">
header
</div></div>
<div id="l0"><div id="l1">
left column
</div></div>
<div id="c0"><div id="c1">
<img alt="dilbert (3K)" src="../gif/dilbert.gif" height="82" width="80" />
</div></div>
<div id="r0"><div id="r1">
right column
</div></div>
<div id="f0"><div id="f1">
footer
</div></div>
http://www.alistapart.com/articles/holygrail
That should be exactly what you need.
Take a look at Yahoo's YUI: Grids builder.
I found the Liquid two column layout at Floatutorial extremely helpful when setting up a full height two column layout - fixed left column with a stretchy right column, with a header and foot row to boot. In their example, they suggest the left column is used as navigation, but it could be anything.
With Floatutorial, not only do you get a sample HTML structure and CSS out of it, but when you're done, you understand why you have what you end up with.
I briefly tried the YUI: Grids builder as suggestd by #JohannesH, and had some small problems with it, but the worst problem is that it was so convoluted that I had no idea why it wasn't working, or why it was supposed to have done.
Edit: there's also a tutorial for a liquid three column layout (which I've not used), and a whole bunch of other tutorials that use floats.
In response to a message from the original poster, here's how I would do the first request with a <table> (the others are trivial modifications):
<style>
body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
border-collapse: collapse;
}
#top, #left, #center, #right, #bottom {
border: 1px solid black;
text-align: center;
vertical-align: center;
}
#left, #right {
width: 200px;
}
#top, #bottom {
height: 200px;
}
</style>
<table id="container">
<tr>
<td colspan=3 id="top">header</td>
</tr>
<tr>
<td id="left">left</td>
<td id="center">center</td>
<td id="right">right</td>
</tr>
<tr>
<td colspan=3 id="bottom">footer</td>
</tr>
</table>
There is a pre-fabbed css grid system that is based on the Golden Rule, and implements all types of column formats quite readily. Check out 960 Grid System. You can accomplish your goals without the use of tables. The nice thing that by using a pure CSS solution you can alter your layout more rapidly.
There is also a jQuery fluid implementation that has a fluid layout that you may be interested in.
This should have all you need:
http://maxdesign.com.au/presentation/page_layouts/
And a more general solution to all your CSS problems:
http://www.blueprintcss.org/
you should check out Elastic CSS Framework:
http://elasticss.com/two-columns-based-layout/
Cheers.