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
Related
I'm trying to achieve a specific css layout. I tried a lot of possibilities including floats, and css tables but i just can't figure it out. CSS tables helped me a lot in the past when there are some fixed columns and some columns that should take the rest of the space but this one seems to be different.
I need to have two columns. Toghether they need to be 100% width of their parent. The right column should be as wide as its content (i.e. it's got 3 buttons in it it should be as wide as these three buttons). The left column should take the rest of the remaining space. Thats it. Sounds easy. In TeX world it is called "\hfill" i would love to have such a command in css.
Here's what i tried so far:
<section>
<div id="a"></div>
<div id="b">
<button>Bla</button>
<button>Test</button>
<button>Hello</button>
<button>World</button>
</div>
</section>
CSS:
section { display: table; width: 100%;}
div { display: table-cell; height: 100px; border: 1px solid #000;}
#a { width: 100% }
#b{ }
And a fiddle:
http://jsfiddle.net/fa9FJ/270/
actually this is quite close to what i want, but the buttons need to be next to each other horizontally.
What you need is
#b {
white-space: nowrap;
}
Demo
This will prevent the buttons to wrap inside the div element
Try this..it works
button
{
width: 96%;
}
#b { display: table; }
button { display: table-cell; }
this should do the trick :)
I have a really simple example which I've written on JSBin. It looks like this:
All I'd like to do is simply take two divs of a given width and height and display them side-by-side without a gap between them. I've used display: inline-block to accomplish the above, but it seems like it refuses to chomp the whitespace between divs, which seems to completely violate the idea of the separation of content and styling.
Here's my HTML:
<div class="container">
<div class="a">
<!-- completely empty -->
</div>
<div class="b">
<!-- nothing at all -->
</div>
</div>
and here's my CSS:
.container {
display: inline-block;
}
.a {
width: 320px;
height: 240px;
display: inline-block;
background-color: #83C5D1;
}
.b {
width: 180px;
height: 240px;
display: inline-block;
background-color: #B2D9D6;
}
How can I work around this to get them snug together without touching my HTML?
Add float:left to both of the divs classes .a and .b
I upated your JSBin http://jsbin.com/iwihox/4/edit
You're using a tabular design. Go for broke!
.container {
display: table-row;
}
.container > * {
display: table-cell;
}
Edit: Firefox did not like the inline-block children.
QUICK FIX
All given answers are good solutions, however the main reason for the gap is that there is white-space characters in your actual HTML that gets rendered. If you remove the space between both divs:
..</div><div>..
That will fix your current problem.
Heres the JSBIN: http://jsbin.com/iwihox/10/edit
THE PROPER SOLUTION:
The proper way to do this, is add float:left to both classes .a and .b. Making them float does change the box-model, so depending on your surrounding markup, you will need to add clear:both to the next tag in your HTML to have the document properly flowing.
CHECK THIS FIDDLE: http://jsbin.com/iwihox/19/edit
Let me know, Thanks!
The 'page' div has three divs. 'headerdiv', 'contentall' and 'footerdiv'. The 'contentall' and 'footerdiv' are overlapping.
Even if i add 'top: 100px' to 'footerdiv' it still does not help.
Please help.
I am new to the forum and wasn't able to post the css code (still need to learn how code is posted here).
Sample page with problem: http://spdyt.com/yahoo-seo/
I checked out such previous discussions but wasn't able to figure it out. Please help.
If the 'contentall' is floated or contains floated elements, that would cause the div to loose its height.
Possible solutions:
Add 'clear:both' to 'footerdiv' => Not recommended. the 'contentall' still doesn't have height)
Add an empty div just before you close 'contentall' and add 'clear:both' to that new div => Not recommended. makes a mess of your code)
Add class 'clearfix' to the 'contentall' div => but before doing so you need to implement the clearfix class => http://www.webtoolkit.info/css-clearfix.html | Recommended
I hope this helps, good luck.
The Problem is not your footer, the problems the content. If you only delete position:relative; you can see it. unforutnately then the header overlapses the content because its not cleared correctly. I suggest to add an empty clear:both; to the headerdiv. It's just cleaner than using you breadcrumbs div.
Make it like this:
HTML:
<div id="headerdiv">
<div id="mastheaddiv">
<div id="headext">
<div id="breadnsearch">
<div style="clear:both;height:1px;width:100%;"></div>
</div>
<div id="contentall"></div>
<div id="footerdiv"></div>
CSS:
#mastheaddiv {
float: left;
width: 79%;
}
#headext {
color: white;
float: right;
height: 100%;
margin-top: 9px;
width: 20%;
}
#breadnsearch {
float: left;
height: auto;
width: 100%;
}
#contentall {
display: block;
height: auto;
width: 100%;
}
Just an advice: First of all I suggest always to define a width and a height of a div. In my experience you'll have less problems simlar to this.
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/
My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?
<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.
You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.
You can use
.floatybox {
display: inline-block;
width: 123px;
}
If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.
Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up
My answer:
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Why?
Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.
One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.
Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.
I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.
Anyway, I hope that's helpful.
you can do:
<div style="float: left;"></div>
or
<div style="display: inline;"></div>
Either one will cause the divs to tile horizontally.
I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
I would use:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
It's the first time I use this 'code tool' from overflow... but shoul do it by now...
What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.
Try this for starters from Smashing Magazine.
Look at the css Float property. http://w3schools.com/css/pr_class_float.asp
It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.
I would try to give them all display: block; attribute and using float: left;.
You can then set width and/or height as you like. You can even specify some vertical-alignment rules.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
another...
try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)