I'm building a menu where every dropdown item has the width of its content. To manage that I had to make the items inline-blocks, but that means they all end up on the same line. Is there a way to make them all on their line without using margins, OR is there a way to have blocks have the width of their content?
Thanks
sample menu item HTML:
<div class="menuItemWrap">
resources
<div class="menuItemContentWrap">
articles
web reviews
bookstore
powerpoint
schwab forms
blunck forms
</div>
</div>
CSS:
.menuItemWrap{
display:inline-block;
float:left;
}
.menuItemHead{
padding:14px 22px;
margin: 0px;
border:0px;
background:#2389DD;
}
.menuItemContentWrap{
position:absolute;
display:none;
width:100px;
background:#A6CFD1;
}
.menuItemContentItem{
display:block;
padding: 8px 14px;
background: red;
color:#333;
position:relative;
float:left;
}
float removes the width and height of an element. In order to make the elements appear on separate line use the clear property:
float: left;
clear: left;
Quote from MDN:
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them.
Demo
Related
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 8 years ago.
I have been trying to make two divs float side by side or basically the shopping cart and the items (namely jcart and cartbox) but cant seem to get it. Here is the demo: link
i tried change float:right; on the cartbox css but that would only move the shopping cart to the right and if I remove the float on the cartbox css.. The cart and the items align side by side but for some reason cart appears to be really small and the "add to cart" button doesn't appear to click. Any help will be appreciated!
HTML:
<form method="post" action="" class="jcart">
<fieldset>
// item details here
</fieldset>
</form>
<div class='cartbox'>
<div id="jcart"><?php $jcart->display_cart();?></div>
<div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div>
</div>
CSS:
#jcart {
position:relative;
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
.jcart {
width:135px;
margin:0 20px 20px 0;
padding-top:20px;
border:solid 2px #E5E5E5;
float:left;
background:#F0F0F0;
text-align:center;
}
.cartbox {
float:left;
position:relative;
top:0;
width:500px;
margin:0;
padding:0;
}
You need to add display: inline-block on the elements you wish to align side by side, as div elements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).
From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centre wider (possibly to 1000px instead of 960px), and coupled with the addition of changing the display property, that should do it.
In terms of the code you need to write directly in order to get this to change, do the following:
#centre {
width: 1000px;
}
.cartbox {
display: inline-block;
}
EDIT: I modified these changes to your website locally and it appears to have worked.
add float:left to your css code in #jcart:
#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
You can use display property to inline or inline-block as #Sam Holmes said
or you can do something using float. like this:
.cartbox div{
float:left;
}
or
.cartbox div{
display:inline;// or display:inline-block;
}
here is the Demo
It is because you don't have enough space in the parent Divs.
I tried to set it to 10px and it allinged fine.
I'm trying to replicate the following table of contents:
You can see my attempt here and see the problem: I don't know how to keep the chapter titles restricted to a specific width so that they don't wander over to the page numbers. I've tried things like width:250px and margin-right:30px; and padding-right:30px;, but to no avail.
Here's some of the code:
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
<div style="text-align:center;font-size:80%">CHAP. IX.</div>
<div class="conts"><span><em>Of the different Degrees of Virtue and Vice</em>, <em>and the methods of estimating them</em>. <em>Of Difficulties attending the practice of Virtue the use of Trial and Discipline in forming reasonable Beings to Virtue</em>, <em>and the Essentials of a good and bad Character</em>.</span><span style="float:right;">p. 200</span>
</div>
Any help would be appreciated.
You should use p to wrap the text instead of a span element, assign some fixed width to p and float that to the left
Demo
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
width: 600px;
}
.conts p {
float: left;
width: 500px;
}
.conts span {
margin-top: 10px;
}
If you want to position the number at the end of the line, use position: absolute; wrapped inside position: relative; container.
Demo 2
First. change all this code <span style="float:right;"> Page number here </span> into <p>Page number</p>. then change your CSS like this.
.entry {
width: 450px;
padding-left: 90px;
}
strong {
font-variant:small-caps;
font-weight:normal;
}
.conts {
width:100%;
}
.conts span {
float:left;
width:80%;
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
.conts p {
float:right;
width:10%;
font-size:80%;
margin-top: 0px;
}
Last, add <br clear="all"/> after <p>Page Number</p>. hope this help :)
See Demo Here
Try adding a padding-right:100px; to the contents and margin-right:-100px; to the floated page number. That should make sure the full contents are correctly made to stay a certain width while pulling your page numbers out of that space and into the right margin.
wrap all of the chapters up into one main div. Float that left, width 80% (or whatever works). then wrap your page numbers into a second div, and float that right with a width of 20% or less, depending on your margins. MAKE SURE YOU GIVE YOUR WRAPPER DIV (or whatever div you wrapped the entire code in) A WIDTH OR THE WIDTHS YOU ASSIGN TO INSIDE DIVS WILL NOT WORK.
I've been battling this a few hours. The text in this span is mysteriously aligned to the top of the span. Here is a screenshot from Firebug:
And here are my related CSS blocks:
.skills {
overflow:hidden;
height:100%;
}
.skills li{
border-bottom:1px dotted black;
position:relative;
width:200px;
height:18px;
margin-left:13px;
}
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
padding:0 5px;
}
Here is the HTML:
<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
<li>
<span>SOAP/Axis2</h4>
</li>
</ul>
Can you tell why this is aligned to the top? I want it in the center.
And here is the jsFiddle, where the same code results it in text being in the center. Does that mean that CSS elements higher in the hierarchy may be causing it?
...where the same code results it in text being in the center. Does
that mean that CSS elements higher in the hierarchy may be causing it?
I imagine that an ancestor in your actual stylesheet has the line-height set to less than 18px. You can look at the calculated line height for that element in your actual stylesheet to see what value was being applied.
The default value for line-height is roughly 1.2x (depends on browser).
Set the line-height to be equal to the non-padded height of the containing element to vertically align a single line of text (in this case, 18px).
Example fiddle: http://jsfiddle.net/4vq42/
No line-height. Make it the same as the height, either 18px or 100%.
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
line-height:18px;
padding:0 5px;
}
Try adding line-height: 18px to .skills li span CSS.
Edit: Just realised Tim Medora already said this. Ignore me.
Setting line-height to the value of your element's height is the simplest way to vertically align text.
.skills li {
height:18px;
line-height:18px;
}
I have two button bars- each contains links, but one also contains a submit button of a certain height. The one with the submit button has all the elements vertically centered. I want the other button bar, without the submit button, to look the same, so I gave it an explicit height. However, the links within it align to the top instead of in the middle.
What's going on here, and how can I make link bars that are of a consistent height, with vertically centered elements?
HTML:
<div class="link-bar">
<input type="submit" value="Save"/>
link
link
</div>
<div class="link-bar">
link
link
</div>
CSS:
input[type='submit'] {
width:100px;
height:40px;
border:solid red 1px;
}
.link-bar {
height:40px;
background:#EEE;
border:blue 1px solid;
margin:10px;
vertical-align: middle;
}
See jsFiddle for example
Simply add line-height equal to the height. By default, any text on that line will be vertically centered. The exception occurs if you wrap the text to a new line.
http://www.w3.org/wiki/CSS/Properties/line-height
I also removed your vertical-align as it's superfluous to content in block level elements. It only applies to inline elements.
.link-bar {
height: 40px;
background: #EEE;
border:blue 1px solid;
margin: 10px;
}
.link-bar a {
line-height: 40px; /* equal to the height of the container */
}
DEMO:
http://jsfiddle.net/SLqbk/9/
Use the line-height property.
.link-bar a {
line-height: 40px;
}
http://jsfiddle.net/SLqbk/7/
Add this to your css
.link-bar a {line-height: 40px; }
http://jsfiddle.net/xYVRj/
I gave #Sparky672 the answer because he correctly addressed my specific question and led me on the right path, but I want to share what I ended up doing, which I think is more effective overall:
Instead of explicitly setting the line-height of .link-bar a to try to match up to the container and button heights, I just set ALL the elements in the toolbar to the same line-height, and make them display:inline-bock. While the normal caveats of using inline-block apply (See here and here), the end result is consistent sizing and vertical centering for all the elements you throw in your toolbar, with less css to manage:
.link-bar * {
line-height: 30px;
display:inline-block;
/* Keep top-bottom padding of elements zeroed for consistent heights: */
padding-top:0; padding-bottom:0;
}
See the updated fiddle.