I have an image and some text floated next to it. I have a title which I wan't to be on its own line so I set it to display:block but it's not working. I can't for the life of me figure it out. It seems to work when I don't have it floated.
Here is an image to help make it clear. I want the image 'Fin MCool' to be display block
Here is my code:
http://jsfiddle.net/zq7C6/
HTML
<div class="staff">
<img src="../assets/images/fin.jpg" alt="">
<div class="staffContent">
<img src="../assets/images/fintitle.png" alt="">
<p>Stunt pilot with the Red Arrows (UK airforce stunt team), has served in combat choppers in 3 recent wars, and fears nothing except small dogs and single women.</p>
<p>Owns an Extra EA-200 for the ultimate full stunt flight experience, and flies all our other fixed wing craft much more sedately when required. And, yes, that is his real name. He's Irish and he doesn't want to talk about it.</p>
</div>
</div>
CSS
.staff{
color:#001D5D;
margin-left: 10px;
}
.staff img {
float:left;
}
.staffContent img {
display: block;
}
.staffContent {
width:500px;
float:left;
}
The problem is not with the block display, all images are displayed as block in your code. Your problem is that the second image gets a float: left against your wish (you wanted only the first image to float).
This is because the rules of .staff img are modifying all images in .staff, not only the direct child as you probably want. The simplest fix is
.staff > img {
The > between the selectors means only direct child elements.
.staff
{
color:#001D5D;
margin-left: 10px;
}
.staff img
{
float:left;
}
.staffContent img
{
display: block;
}
.staffContent
{
width:60%;
float:left;
}
.staffContent img
{
float: none;
}
DEMO
Demo here
Css
.staffContent img.heading{
float:none;
}
some changes in html
Give class on img .heading under the .staffContent container.
<img src="http://purestrategic.com/wp-content/uploads/2013/10/typography-unnamed-cbffa-x-hd-jootix-66808-300x168.jpg" alt="" width="200" height="40" class="heading">
Simply add float:none to .staffContent img
DEMO
Related
Thank you all for your help so far. I updated the description, concept image, and JSFiddle link to make things a little clearer.
I have been wracking my brains on this seemingly small issue the whole day. My web dev friends are baffled and I could not find a suitable answer in my search of this site and others (though, I could have missed it somewhere along the way).
Here's what I am trying to achieve:
3 non-fixed-width DIVs within one fixed-width container DIV
The center DIV needs to be centered, and no larger than the text it contains.
The left and right DIVs need to fill the remaining space in the container DIV.
Here are some links to help communicate this concept:
This is what I'd like to end up with
Check out this JSFiddle Link
The basic HTML:
<div id="container" >
<div id="left" ></div>
<div id="center" >Text inside center should resize this block</div>
<div id="right" ></div>
</div>
Below, I removed most of the styles I have tried. This CSS currently centers the DIV (if I set it as an inline block), but I need the other divs to fill the left and right space remaining:
#container {
width:750px;
text-align:center;
border:3px solid #E85355;
}
#left {
background-color:#A3CB46;
}
#center {
background-color:#6D6E71;
display:inline-block;
color:#FFFFFF;
}
#right {
background-color:#1DB0CE;
}
I've tried floating, no-wrap, overflow, etc. Thanks a million to whomever can offer some help!
Try the following CSS. It fills the width of the container...
#container {
width:764px;
text-align:center;
}
#container > div {
display: table-cell;
}
#center {
background-color:#CDD7D7;
}
#right, #left {
background-color:#E85355;
width:200px;
}
EDIT: display:table on container, not needed...
Do you need this ?
CSS
#container {
width:764px;
text-align:center;}
#left {
background-color:#E85355;
width:20px;
height:20px;
float:left;
}
#center {
background-color:#CDD7D7;
display:inline-block;}
#right {
background-color:#65A8A6;
width:20px;
height:20px;
float:right;
}
DEMO
Try this:
jsfiddle.net/SHnc9/36/
You can do it with flexbox! Demo: http://dabblet.com/gist/7187048
Markup
<div class='container'>
<div class='box left'></div>
<div class='box center'>enter text here to see this box grow!</div>
<div class='box right'></div>
</div>
CSS
.container {
display: flex;
}
.box {
flex-grow: 1;
}
.center {
flex-grow: 0; /* to get the box to wrap closely around the text */
}
According to caniuse.com http://caniuse.com/#search=flexbox, it's supported in all the major desktop browsers with firefox having partial support which probably means it uses the old syntax / doesn't support some new properties but the demo worked fine when I checked.
Just be sure to use prefixes(or use a prefixfree / unprefix plugin), add the old syntax for old browser versions (add old syntax below the new ones).
Also, use display: inline-block as a fallback.
You may also want to check out flexie.js http://flexiejs.com/.
Essential reading:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
ATTENTION! PROBLEM SOLVED, SOLUTION PASTED BELOW INITIAL QUESTION
on the very top of web page Im working I have on to the left corner a flag (to change language) which I have in a div. On the right I have another div for another image (shop cart) but since I floated the right div, I still go to the right divs address when clicking on the left, like the right overrides the let one. Why? How can I solve this?
Also, I am doing this by using my html/css-files and editing them to fit wordpress for a customer.
CSS
#topmenu img {
margin-left: 25px;
float:left;
position:relative;
}
#cartmenu img {
position:relative;
margin-left: 542px;
}
header.php
<div id="container">
<div id="topmenu">
<img src="wp-content/themes/blank/images/icon_en_global.png" alt="English.png" width="42" height="30">
</div>
<div id="cartmenu">
<img src="wp-content/themes/blank/images/cart.png" alt="cart.png" height="" width="">
</div>
// SOLUTION Set width (in css) to both elements as well a float:left to both elements, then position with margins to get them where you want.
#topmenu img {
margin-left: 25px;
float:left;
position:relative;
width: 42px;
height:45;
margin-top:15px;
margin-bottom:-10px;
}
#cartmenu img {
position:relative;
margin-left: 520px;
float left;
width:350px;
height:40px;
margin-top:-20px;
}
Try to define a width for #topmenu img and giving the cartmenu a float:left; as well.
How can I create a 3 column CSS layout, with the left and right edges flush with edges of parent element? I want to be able to do this within a liquid layout, so no fixed widths.
This sounds like it should be easy, but the best thing I can come up with is quite a hack.
<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>
...
<span class="c3">
<span class="left"> ...
</span>
<span class="center"> ...
</span>
<span class="right"> ...
</span>
</span>
You can see it here, this works okay (in my browser at least) but it just feels wrong. Is there a better way to do this?
Since there seems to be some confusion about what I'm trying to do, here it is in context. I run into this fairly often, where I already have a page layout and I want three columns within that layout. I want the three columns to be "fully justified," and I want things to be liquid, because even thought the page has a fixed layout, there's usually a facebook app or something also and I like to reuse as much as possible. Here's the latest example of where I've run into this (bottom of the page).
I'm not worried about SEO, the content is usually in 1-2-3 order of importance. I don't really care if they're all the same length. I'd like to not use a ton of markup if possible. My main goal is to have the left and right edges flush with the parent element, and and equal amount of space between each column.
I could try to write a new layout for you or fix the one you started, but I feel like I should just point you to a good source for the layout you're after:
The Perfect 3 Column Liquid Layout (Percentage widths)
No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I have used this resource for many years and it's rock solid, even in IE6. Make sure to click around to see all the examples, and read the article so you understand how it works.
This is an image of the basic layout structure (not the actual output):
It uses some crafty relative positioning and SEO-friendly 2-1-3 source order. Full height faux columns, fixed-width or fluid columns...
I cannot recommend this resource enough, I hope you enjoy it.
OK, sounds like you just want a lightweight alternative to your already-working solution.
Per our discussion in chat, I'm posting the mini-template I created:
<div class="wrapper">
<div>1</div>
<div>2</div>
<div class="last">3</div> <!-- or use CSS3 :last selector -->
</div>
.wrapper {
width:500px; /* any width OK */
float:left;
}
.wrapper div {
width:30.65%; /* not perfect, but close */
padding:1%;
margin:0 0 0 1%;
float:left;
}
.wrapper div:first-child { margin:0; }
/* make up for imperfect 1/3 width rounding */
.last { float:right;margin:0 }
Demo: http://jsfiddle.net/bH8vY/2/
Best of luck.
As far as I can tell, the solution I gave in the question is the best answer for this. I haven't found any other suggestions since posting this that would achieve what I want.
I'll reiterate it here so the question can be closed.
<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>
...
<span class="c3">
<span class="left"> ...
</span>
<span class="center"> ...
</span>
<span class="right"> ...
</span>
</span>
This might be what you want/help you; I've made a layout that uses css to emulate dynamic table behaviour [using divs]. It works in Chrome, Firefox and IE>7.
DEMO, have a go at resizing the window. That middle bit is what you want, I think.
Have a fiddle with it. Uncomment the border css line to see whats going on.
Code:
<div class="view" style="height:100%; width:100%">
<div class="north">
n
</div>
<div class="middle">
<div class="west">
w
</div>
<div class="centre">
c
</div>
<div class="east">
e
</div>
</div>
<div class="south">
s
</div>
</div>
html, body {
height : 100%;
margin : 0;
}
.view,
.view > .middle {
display : table;
}
.view > .north,
.view > .south {
height : 1px;
display : table-row;
}
.view > .north { vertical-align : top; }
.view > .south { vertical-align : bottom; }
.view > .middle > div {
display : table-cell;
}
.view > .west,
.view > .east {
width : 1px;
}
/*div { border : 1px solid black; }*/
Simple markup, no JS, and dynamic layout.
I'm using the technique in Stack Overflow question CSS centering text between two images but am unable to make the text center.
I would like the text "0 of 0" centered in this markup (as a fiddle):
HTML:
<div id="invoiceImageContainer">
<img src="http://i.imgur.com/8QT8u.png" id="invoiceImage">
<div id="invoiceNav">
<img title="Next" src="http://i.imgur.com/oZb7r.png" id="nextInvoice">
<img title="Previous" src="http://i.imgur.com/aKi11.png" id="prevInvoice">
<span id="invoiceCount">0 of 0</span>
</div>
</div>
CSS:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount {
text-align:center;
}
What am I doing wrong?
You are using a span for the text container which is an inline element. Therefore its width is the same as the width required for its content, changing it to a p (or changing display to block) will allow for horizontal centering. If you want to center vertically then set the line-height equal to the height of the images and set vertical-align: middle.
Updated fiddle: http://jsfiddle.net/W5jQd/3/.
Good old quick hack:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
text-align:center;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount
{
line-height: 35px;
}
In your original markup you had #invoiceCount set to text-align:center. This is wrong because you can't center spans in that way, so I moved it to your container div.
The quick hack is the line-height, set to approximately the known size of your image. This technique is good and safe when you are doing a single line of text and the size of the elements involved is known.
This will fix it:
/* should be block level element */
#invoiceCount{
display: block;
}
See here: http://jsfiddle.net/W5jQd/5/
You could add the following to the CSS of #invoiceNav
text-align: center;
line-height: 32px;
the first centers the <span> element and the second centers the text vertically in the <div> (same height as the images)
The problem is caused by the fact that doesn't support "width", since it's an inline block. The following changes will do the trick: in HTML change <span id="invoiceCount">0 of 0</span> to <div id="invoiceCount">0 of 0</div> and in CSS add width to the #invoiceCount like this:
#invoiceCount {
text-align:center;
width: 100%;
}
Thanks for the very quick replies to my previous question.
"The first thing on the page, right after , I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page."
I forgot to mention that I would like the entire "banner" to have the same background colo(u)r. The text, the image and everything in between.
Something like this:
<div style="height:100px;width:100%;background:url(yourimage.png);background-position:right;">Yourtext</div>
.banner{ color:blue;
background-color:blue;
background:url(yourimage.png);
background-position:right;
width:100%
}
in addition, you can have create a new class so that the div for for banner can inherit the properties, this way you can seperate the div for the image and text
Something like this?
HTML
<div class="divwrap">
<div class="div1">text</div>
<div class="div2"><img src="http://farm4.static.flickr.com/3170/2724062433_68f2af7af7_m.jpg"></div>
<div class="divclear"></div>
</div>
CSS
.divwrap
{
background-color: #CCC;
}
.div1
{
float: left;
}
.div2
{
float: right;
}
.div2 img
{
display: block;
}
.divclear
{
clear: both;
}