I want to do something like this:
.even {
float: left;
text-align: left;
}
.even img {
float: right;
}
It's not working though. I'm hoping my problem is just a syntax one, but I can't see to figure out how to do this. I've dug around google, but I'm having trouble finding the right set of keywords.
The associated html I'd like to use should look something like ths:
<div class="linkBlock even">
<img class="linkThumbnail" src="graphics/links/thumbnail_oilcan.jpg" width="267" height="200"/>
<h2>oilcan press</h2>
<p>
oilcan press is a purveyor of handmade books & word-related artefacts.
if you'd like to commission work of a particular size or shape or theme let him
know via etsy or email: oilcanpress [!at] gmail.com
they will gladly make custom boxes as per your general requests of colors/concepts.
if you are desirous of sevral items a bundle can be arranged at reduced prices.
</p>
<p>
you can view much of his work on flickr.
</p>
</div>
I'd like for the text of that block to float and align left, and the image to float right. With the code I have written above, the image is being centered in the page above the text; it's not floating, it looks like it's still using the static layout.
I'm only a CSS dabbler but I think this should work:
div.even>img {
float: right;
}
This matches child img elements inside a div with class even.
<img> & <p> are both block-level elements and so they line-break unless other wise specified. You need to position the <img> & <p> inside the parent div, instead of trying to position the text on the parent div. You also need to specify a width for the parent div and the <p> tag. This is probably why you are seeing the text appear below the image, because it is defaulting to the width of the parent div and cannot fit side by side with the image even though it is floated. You probably want something like this:
.even {
width: 400px;
display: block; /*or inline-block*/
padding: 10px; /*just for a little visual spacing*/
}
.even img {
position: relative;
display: inline-block;
float: right;
margin-right: 25px;
}
.even p {
display: inline-block;
position: relative;
width: 250px;
float: right;
}
You should also move your <img> tag below your h2 tag as it might interfere with the float. (I'm assuming you want this to appear above the thumbnail and the text.)
Maybe you have a clear attribute defined for the paragraph or some other style sheets? Your code works fine for me.
Use Firebug to debug your css.
Related
I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.
How can I modify the HTML/CSS so the chevrons are placed on the same line as the date?
<div class= "dater">
<div class="chevron-left">
<img src="glyphicons-225-chevron-left.png"/>
</div>
<h2><%= #todie %></h2>
<div class="chevron-right">
<img src="glyphicons-224-chevron-right.png"/>
</div>
</div>
EDIT: My solution based on Rob's answer.
.chevron-right img {
float: right;
}
.chevron-left img {
float: left;
}
.dater {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 60px;
margin-bottom: 40px;
}
.dater h2 {
text-align: center;
font-weight: 400;
float: left;
}
The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.
First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.
Second, you can use the CSS pseudo classes ::before and ::after
You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.
There are more ways than just those.
Complete noob here with HTML/CSS.
I'm trying to get something like this : http://imgur.com/Bc72V4M
Here is my code:
<div id="topbar">
<div class="image">
<img src="images/ghwlogo.png">
</div>
<div class="text">
<h1>TEXT TEXT TEXT TEXT TEXT</h1>
</div>
</div>
I've tried floating the div topbar, then display-inline but it never displays horizontally.
I'm so confused. Following tutorials is easy-peasy, but when you need to figure out how to do this yourself, it's completely different.
I think I'm missing a step somewhere. I feel like this should be really easy but it's not.
img {
display: inline;
vertical-align: middle;
}
.subhead {
display: inline;
vertical-align: middle;
}
<div>
<img src="http://dummyimage.com/100x100/000/fff"/>
<h1 class='subhead'>
TEXT
</h1>
</div>
I removed some HTML; I only add more when I can't think of how to get the effect with just CSS. You can add some back, but you may have to set display: inline on some inner elements then.
Generally, a few different ways of putting elements horizontally:
Floating: Removes it from standard flow layout, and may interfere with the root element's total height. Was previously the preferred method of placement but I feel like there are better alternatives.
Display Inline: Treats an element a bit like text. Cannot have a custom height or various other attributes.
Display Inline-Block: Often a "fix-all" for me when I want something laid out horizontally, but to have other styling aspects like height, border, etc.
Position Absolute: You can make a higher element a "relative element" for absolute positioning by setting position: relative on it. Like floating this takes it out of layout, but it can even overlap elements; useful for certain things. Don't rely on absolute pixel amounts too much.
In my case, once things are laid out horizontally, vertical alignment is the next issue. Remember that adding content could make this block very very tall, so you can't just say "vertical-align to the bottom of the thing". Think of all elements in the div as simply letters in a paragraph; for the smaller ones, you're telling it how to align that one letter. For the biggest ones, you're telling it where that "letter" is aligned compared to the others. So, it's important to set vertical alignment how you want it on the image as well.
EDIT: updated answer per #Katana314 answer. I've maintained the OP's markup.
#topbar {
width: 100%;
overflow: hidden;
}
.image {
display: inline-block;
vertical-align: middle;
border: 5px solid black;
height: 100px;
width: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dgautsch/che0dtfk/
You could make the image and the text a separate div and then have both of them under the inline-block attribute. The text div would need to have a position: absolute attribute, though, for formatting purposes.
After viewing the Fiddle, you can adjust the left position attribute accordingly to generate space. Here is the link: https://jsfiddle.net/kuLLd866/.
HTML:
<body>
<div class="image">
<img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
</div>
<div class="imagetext">
<h1>Text text text</h1>
</div>
</body>
CSS:
.image {
display: inline-block;
}
.imagetext {
position: absolute;
top: 50px;
display: inline-block;
}
I have a simple web page that contains a content div, a paragraph inside of that, and a header, text and image inside of that. The html looks like this:
<div id="content">
<p>
<img class="coverR" src="img/img.jpg">
<h1>Header</h1>
Insert description here
</p>
</div>
The css for these elements looks like this:
#content p {
width: 100%;
overflow: auto;
text-indent: 2em;
margin-bottom: 5px;
}
#content .coverR {
width: 200px;
margin: 5px;
margin-right: 8%;
float: right;
clear: left;
}
This all seems fine, but when I open the chrome inspector and look at the HTML it looks like this:
This wrecks my page flow, and I have no idea why it happens. Am I doing something incredibly stupid?
The end tag for a paragraph is optional.
A paragraph cannot contain a heading, it can only contain phrasing content.
Thus the heading implicitly ends the paragraph, so it and everything that follows are not inside it.
There is no way to write HTML so a heading is inside a paragraph
Use more appropriate elements. It's hard to tell what you should be using since your example content doesn't give any context.
As you can see in thew image below, all items have different spacing between them and simply look awful.
This is what I currently have:
Here is the code (it's a mess) after trying tons of different tricks:
http://pastebin.com/D8ekkj6S
I'd be really thankful if someone could tell me how to properly do this correctly.
PS: If possible, I'd love to know how to vertically align the icon and it's corresponding text by the middle point.
Something like this should work for you:
HTML:
<div class="iconing">
<i class="icon-someIcon"></i>
<p>Your text</p>
</div>
CSS:
.iconing i, .iconing p {
display: inline-block;
vertical-align: middle;
}
[class^="icon-"],
[class*=" icon-"] {
width: 50px;
height: 50px;
line-height: 50px;
}
Replace all instances of 50px with your height.
First of all, don't use inline CSS. Try using this CSS instead:
img {
float: left;
clear: both;
margin-right: 10px;
}
p {
line-height: 45px;
}
For the whole example:
http://jsfiddle.net/VMfYa/
You could also set a bigger line height and set the icon as a background with a padding on the text to keep it away from the icon, or have an icon div and a text div, and float them both left beside each other using margin's to align them properly.
give more width to p
check this out fiddle demo
I am working with someone else's styling, and can't get things as they managed to. I am trying to make things look like this page:
http://www.comehike.com/outdoors/parks/add_trailhead.php
See how the image is nicely on the right, and the form elements are on the left.
I have this page that I am messing with and trying to make similar:
http://www.comehike.com/account/member_home.php
Is there an easy way for me to make the image go to the far left, and the stuff asking the person to log in, to be on the right?
Thanks!
Start with changing the width on the first div within .basic. Change the width to 100% instead of 450px
You should be able to continue from there.
I would also move the image into it's own container and float that right, and put the form actions in another container. Also, make use of classes and ids for styling to clean things up.
Here is how you can make food use of floating elements:
HTML:
<div class="container">
<div class="form">
<form>....</form>
</div>
<div class="leftImage">
<img src="img.jpg" />
</div>
<div class="clear"></div>
</div>
CSS:
.container {
width: 800px;
}
.container .form {
width: 500px;
float:left;
}
.container .leftImage {
width: 250px;
float:left;
}
.clear {
clear:both;
}
Replace the div with width: 450px to width: 100% then the child H3 float: left
increase the width to 845px for the div.
Float image to the left.
for the h3 tag do the styling
h3 {
float: right;
display: inline;
}
This will do the task for you.
Remove the empty tags from the HTML.