I styled an image with float:left, and predictably, the text of the header after it appears to the right of the image (if it helps, the context for this situation is a logo and title next to each other in the header of a website).
When I look at the header element (h1), it takes up space behind the image (overlapping). The text is still next to the image, but the background of the h1 element overlaps with the image.
<div id="header">
<img src="logo2.png" />
<h1>AlanHoRizon</h1>
<p>
...
#header img {
float: left;
}
Is this how floating is supposed to work? Is background synonymous to the padding in the css box model? What if I wanted the header element to begin completely after the image, including the background (which is what I expected float to do actually).
Doesn't actually affect the appearance of the header, as everything appears as it should, but I'm curious, as it would add to my understanding of html and css web design.
thanks.
HTML:
<div id="header">
<img id="logo" src="http://lorempixum.com/100/100/abstract" alt="" />
<div>
<h1>AlanHoRizon</h1>
<h3>Site description</h3>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor ...</p>
</div>
CSS:
#header:after {
display: block;
clear: both;
content: ".";
visibility: hidden;
height: 0;
line-height: 0;
}
#logo {
float: left;
}
#header div {
float: left;
padding: .25em;
}
And here's the complete jsfiddle example
modify the css code to:
h1
{
float:left;
}
img
{
float:left;
}
This should work. The following will produce the heading on the left of the image.
Actually, I think I found an answer to my question. Simply put, it seems like this is just how floating behavior works. The content is pushed over, but the background and borders still go behind the float:
http://phrogz.net/CSS/understandingfloats.html#ascolumns
I'm not sure if padding is synonymous to background, but I did test the header elements "padding" simply by making the background color red, and the background indeed is behind the float. In terms of the css box model, I'm still not quite sure what's going on.
Related
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 try to copy (sort of) single post presentation design from certain website. Here is how it looks like:
(antyweb.pl)
Apparently they use "A" element and the image is its background. I don't like this idea as it requires to put some dummy text that we won't see anyway.
At this point - let me show how I would like to do it:
What I have is an article element employed as container. Inside there are two other elements with max-width for img and width for div set to 61.8033988749854683%.
How to make it so that the div and the image will be displayed right below the header at the same height?
So far I failed as the div was overlapping over the content below while resizing or when it had enough text in it to make it higher than the image.
Thanks in advance, much love
-edit 1-
first fiddle.
-edit 2-
another container added in order to get text where it belongs to: http://jsfiddle.net/MM5hs/5/
What happens now is that the text from first article overlaps another article: http://jsfiddle.net/MM5hs/6/
You can use floats.
FIDDLE
HTML :
<article>
<header>
<h2>Header</h2>
</header>
<div name="topline">
<div class="img_wrap">
<img src="http://cdn.desktopwallpapers4.me/wallpapers/animals/1920x1200/1/3634-kitten-1920x1200-animal-wallpaper.jpg" />
</div>
<div name="content">
<p>... content ...</p>
</div>
</div>
<div class="auth">
<span>Author:
me,
<time datetime="2014-04-04T01:48:23+00:00">2014-04-04T01:48:23+00:00</time>
</span>
</div>
</article>
CSS :
article {
width: 50%;
margin: auto;
}
div[name*="topline"] {
position:relative;
}
div[name*="content"] {
max-width: 61.8033988749854683%;
margin-left: 38.1966011250145317%;
}
.img_wrap {
width:38.1966011250145317%;
float:left;
overflow:visible;
}
article img {
width: 150%;
}
.auth {
clear:both;
}
Let's say that I have an image that can be a variable width (min:100px, max:100% [760px]). I also have a <p> element that is to be shown right below the image. I'd like the <p> to end up with the same width as the <img>, but I can't seem to find an answer.
Here is the code involved in such a scenario jsfiddle:
html:
<div id='page'>
<figure>
<img src='http://www.myimage.com/img.jpg'/>
<p>Hi there. I am some text. I would like to start where the image starts :(</p>
</figure>
</div>
css:
#page {
width:760px; /* arbitrary */
}
figure img {
display: block;
border: 1px solid #333;
max-width: 100%;
min-width: 100px;
margin: 0 auto;
}
figure p {
/* ??? */
}
Any ideas?
You can use display: table on the figure and set a small width on it. Because it's a table layout it'll then become as wide as the content, in this case the image.
figure {
display: table;
width: 1%;
}
Demo
It is inheriting from #page div. not from the image. Please see the same fiddle updated.
But, You can control individual elements. You have to specify how you wish it to look like.
Here is the FIDDLE that I made using
HTML:
<div id='page'>
<figure>
<img src='http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg'/>
<figcaption>Hi there. I am some text. I would like to start where the image starts :(</figcaption>
</figure>
</div>
CSS:
#page {
width:760px; /* arbitrary */
}
figure{
padding-left: 10%;
}
Actually there are several ways to make an image caption, such as using <table>. I'm not saying that this is the best way to do that. But this is the easiest way since I see you're using <figure> there. I hope this helps you.
I have an image thumbnail with text that is on the right side of the image. I have a hyperlink on the image that pops up the full size image.
Now the hyper link only works on the bottom half the image, (underneath where the text is inline to the image).
Oddly enough, it seems to work fine on jsfiddle, but not on the website.
Is there anything that could be causing this problem? The JSFIDDLE below is exactly how it is on the website.
http://jsfiddle.net/EJvm2/1/
CSS:
.content {
width: 500px;
padding: 10px;
overflow: hidden;
}
.content img, .content h3 {
float: left;
border-style:solid;
border-width:5px;
}
.content img {
padding-right: 10px;
}
.content p {
padding: 40px 0 0 20px;
}
HTML:
<div class="content"> <a id="image1" href="images/site_images/acorn-award.jpg" title="image title.">
<img src="images/site_images/thumb.jpg" alt="" width="200" height="120" />
</a>
<p>This is some text explaining the image</p>
</div>
There is something elsewhere on the page that is overlaying part of the link. You can find out what it is by right-clicking on the part that doesn't work and selecting "Inspect element" or its equivalent in whichever browser you are using.
I don't see any reason for the following declaration:
.content img, .content h3 {
float: left;
}
Randomly (at least it makes no sense in the fiddle on the img element) floating elements almost always causes problems. In your case most likely the image size does not fit the containing element, thus causing overflow and overlapping issues. Remove the float (move it to the containing anchor) or at least clear it.
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.