I have a div including three inner divs which are all floated left. This floats should represent three columns. So far, everthing's ok.
But if I add headlines inside each of the inner divs and the headlines are to wide, the headlines will overlap.
An image will show it better than 1000 words:
(Sorry for external link. But due to I am new here I have not enough reputation points to post images :) )
My html code looks like this:
<div id="content_container" class="appearance">
<div class="column">
<h1>My headline1111111111111</h1>
text
</div>
<div class="column">
<h1>My headline2222222222</h1>
text
</div>
<div class="column">
<h1>My headline333333333333333333333</h1>
text
</div>
<div style="clear: left;"></div>
</div>
And here is my css code:
#content_container {
position: relative;
}
.column {
float: left;
width: 33.33333%;
padding-right: 10px;
}
.appearance {
margin: 0 auto;
width: 60%;
}
The content_container on the other hand is also an inner div of another wrapper container. Don't know whether it matter in this case.
Any ideas what I could do, to fix it?
I think word-break, with which you can specify if you want to break line within a word, will do the trick:
.column { word-break:break-all; }
jsFiddle demo.
You can read more about the word-break property here.
You can use
.column { overflow: hidden; }
to truncate the header or
.column { overflow-x: scroll; }
to make it scrollable.
Related
Im floating a heading to the left and a div containing a few links to the right. At wide screen widths everything is fine.
At smaller widths the links appear under the heading. Instead I need the heading to wrap.
My content is dynamic, the heading text will vary in length and the number of links with vary also. Therefore I dont believe I can use % widths.
I can alter the HTML however I need to keep the heading above the links in the HTML. This is because for the smallest media query the heading will be above the links.
http://codepen.io/anon/pen/OPxbxG
<div class="container">
<h1>Title goes here</h1>
<div class="links">
Link one
Link two
</div>
</div>
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
}
h1 {
float: left;
margin: 0;
}
.links {
float: right;
}
Did you mean something like that : http://codepen.io/anon/pen/ZYXBoB ?
I just remove the float:left; on the title and put it after the menu in DOM.
1) Place the links first in the markup
2) Set overflow:hidden (or auto) on the heading instead of float:left
Updated Codepen (Resize page to see this work)
The reason why this works is that setting overflow:hidden (or auto) establishes a new block formatting context. For more info see this post.
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
}
h1 {
overflow: hidden;
margin: 0;
}
.links {
float: right;
}
<div class="container">
<div class="links">
Link one
Link two
</div>
<h1>Title goes here</h1>
</div>
If CSS3 is an option, then you can use flexbox to acheive this, without having to change the order of the markup.
Just set display:flex on the container and flex:1 on the heading to fill remaining viewport width (not taken by the links)
Updated Codepen
.container {
background: grey;
width: 60%;
margin: auto;
overflow: auto;
display: flex;
}
h1 {
flex: 1;
margin: 0;
}
.links {
float: right;
}
<div class="container">
<h1>Title goes here</h1>
<div class="links">
Link one
Link two
</div>
</div>
Im trying to place some text at the left of an image. Inline-block doesnt suffice because if the string is long enough, it just pushed the image downwards.
The goal is to have a container with a fixed width, which contains the image at the right and text filling the left, which wraps if long enough, while being vertically aligned to the bottom.
I have an initial example using floats:
.container {
width: 200px;
}
.container img {
width: 60px;
height: 60px;
float: right;
}
.container h1 {
font-size: 15px;
}
<div class="container">
<img src="//placehold.it/60x60"/>
<h1>Text Text Text Text Text</h1>
</div>
The problem with this is that the text is vertically aligned to the top. I want it to be aligned to the bottom. I've tried everything and i just cant make it work. Any ideas?
jsFiddle demo
invert the order of your children elements and try this CSS (that emulates the use of Table elements)
.container{
display:table;
width: 200px;
}
.container > *{ /* target immediate children */
display:table-cell;
vertical-align:bottom;
}
.container img {
width: 60px;
height: 60px;
}
.container h1 {
font-size: 15px;
}
<div class="container">
<h1>Text Text Text Text Text</h1>
<img src="//placehold.it/60x60" />
</div>
P.S: SEO (Search-Engine-Optimization) -wise it's not the best idea to have more that one <h1> inside a page. Use h1 wisely ;)
My problem is quite simple, but I couldn't figure out how to do it.
I have a div and inside it, I display some information . basically, something like this:
title1: 20
title2: 30
I want the title to be aligned to the left, and the number to the right.
Here is how I did http://jsfiddle.net/MmLQL/34/ . As you can see, I have a line break between the number and the title (which I believe comes from the use of h tag). But the thing is even if I use a span tag which is supposed to display elements inline and does not force line break, I lose the text-align right/left option. Here is an exmaple : http://jsfiddle.net/MmLQL/35/
You should try this way with "float:":
.container {
width: 100%;
clear: both;
}
.title {
float:left ;
display: inline;
}
.number {
float: right;
}
<div >
<div class="container">
<div class="title">title:</div>
<div class="number">number </div>
</div>
<div class="container">
<div class="title">title:</div>
<div class="number">number </div>
</div>
</div>
I'd do this woth float param. Like this: http://jsfiddle.net/dan1410/MmLQL/38/
Try this, http://jsfiddle.net/MmLQL/36/,
HTML
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
CSS
h2 {text-align:left}
h3 {
text-align: right;
float:right;
}
You might have to use float-clear on the divs though, this should help, http://www.positioniseverything.net/easyclearing.html,
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
..and modify the divs as class="clearfix".
I think the following should work, using inline-block to adjust the layout of the headers, then a float on the left-aligned one to ensure it's nestled against the right one.
div { width: 100%; }
h2 {
width: 50%;
display: inline-block;
float: left;
}
h3 {
display: inline-block;
width: 50%;
text-align: right;
}
You can also use CSS table/table-cells
<div class="container">
<h2>title: The Title</h2>
<h3>number</h3>
</div>
CSS:
.container {
border: 1px solid gray;
display: table;
width: 400px; /* set to 100% if full width */
}
h2 {
text-align:left;
display: table-cell;
}
h3 {
text-align: right;
display: table-cell;
}
See demo http://jsfiddle.net/audetwebdesign/pcZaq/
This approach is useful if you need some control over vertical alignment.
In addition, the table-cells will always remain on a single line, unlike floats or inline-blocks that could wrap to a second line for small screen sizes.
The choice depends in part on how you want the layout to behave in a responsive manner.
Instead of all the hacky solutions provided in other answers, it looks like you want to align tabular data. In which case, you should use a table for that.
Display:table-cell actually only exists in CSS to give the actual element and it's children their styles. It should not be used to let non-table elements behave like table elements. At least, imho.
Float:left seems like an ok alternative, if you're only looking for aligning the lay-out of the elements.
If your data actually is tabular data, then use a table. It solves your problem and is more semantic at the same time.
I want to create two divs beside each other, however I want the one on the left side to be 300px, and the right one to take up the remaining amount on the screen. How would that be possible? Thanks!
The most straight-forward (and I would say correct) way is to use display: table:
#wrapper {
display: table;
width: 100%;
}
#left, #right {
display: table-cell;
color: white;
}
#left {
background: blue;
width: 300px;
}
#right {
background: red;
}
<section id="wrapper">
<aside id="left">Left 300px</aside>
<div id="right">Right the rest</div>
</section>
http://jsfiddle.net/YbLZE/1/
Try resizing the bottom right frame.
Updated with HTML5 elements section and aside, which you should use if you have an HTML5 doctype. I have to remember to use those...
This is the working example:
http://jsfiddle.net/tnm62/
Explenation:
1. Place both elements in one container.
2. Position your left element absolute, set its width to 300px.
3. Set left margin to your right element to 300px.
One solution is to float: left; the left div that's 300px wide, and then apply overflow: hidden; to your right div. Here's the basic outline:
HTML:
<div class = "left">
Glee is awesome!
</div>
<div class = "right">
Glee is awesome!
</div>
CSS:
.left {
width: 300px;
float: left;
}
.right {
overflow: hidden;
}
And a little demo: little link.
Here's something for newer browsers (not IE):
CSS:
#container {
display: box;
}
#left {
width: 400px;
}
#right {
box-flex: 1;
}
HTML:
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
Demo: http://jsfiddle.net/N5zhH/1/
This should be sufficient:
<div style="overflow: hidden;">
<div style="width: 300px; float: left;"></div>
<div style="margin-left: 300px;"></div>
</div>
overflow: hidden will stretch the container div to accommodate the tallest child element
float: left floats the element left (doh!)
width: 300px and margin-left: 300px together assures that if the right column is taller than left it will not flow below the left floated div; it will maintain a 300x gap from the left edge of container div
Tip: change to margin-left: 320px to add a 20px gutter
Here is a nice little DEMO
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)