Wrapping Text Pushing Image Above It Up When - html

I need a little help preventing some text below and image from pushing the image up when it wraps. Please see the attached image to best understand what I'm talking about. The goal is to get all of the icons lined up horizontally and have "This Text Is" line up with "Some Text" and "More Text". "Longer" should be below everything else on its own line.
Each of the icons and text are wrapped in their own container divs like so:
<div class = "icon">
<a href = "#">
<img src = "icon.png" />
<h3>Some Text</h3>
</a>
</div>
Here's the CSS which I'm using to create fixed width columns:
.icon {
display: inline-block;
width: 150px;
}
It seems like the "display: inline-block" is causing the problem, but if I change it to "inline" the icon divs lose their fixed width. Using margin, padding, or positioning to move the icons that are being pushed up back down is not a valid solution because that would get messy. There are 10 icons total and the icon div width changes depending on the browser width (which makes the text wraps at different points depending on the browser width). I was hoping there was an easy CSS solution such as "vertical-align" (which didn't work).
Any help would be greatly appreciated.

You said vertical-align did not work.
This should align images that have an equal height to the top:
.icon {
vertical-align: top;
}

You could wrap it in a flex container
great write up on flex here
.icon {
display: inline-block;
width: 150px;
}
.container{display:flex}
<div class="container">
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>Some Text</h3>
</a>
</div>
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>more Text</h3>
</a>
</div>
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>Some Longer Text with 2 lines</h3>
</a>
</div>
</div>

You can float the icons left in the container, and cause the container to trigger a reflow to contain the icons.
.icon {
float: left;
display: block;
}
.container {
overflow: hidden;
}

Related

Text top align on CSS

I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.
The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.
I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.
Link to the jsFiddle with the whole page here
Link to the isolated div here
Is there a property I am missing, or another trick to move the text upwards?
<div id="banner" style="width:100vw;height:10vh;overflow:hidden">
<div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red">
img
</div>
<div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue">
<p style="text-align:center;font-size: 2.5em;">Staged Title</p>
</div>
<div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green">
<p id="timeNow" style="font-size: 2.5em;text-align:center">
10:00
</p>
</div>
</div>
<div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow">
Stage is managed with JS
</div>
The problem is the <p> tag inside the div. You realy don't need it here. Remove it, and add the styling to the div element:
Staged Title
Demo:
.bannerMiddle {
width: 70vw;
height: 10vh;
overflow: hidden;
float: left;
background-color: blue;
text-align: center;
font-size: 2em;
}
<div class="bannerMiddle">
Staged Title
</div>
<br style="clear: left"><br>
<div class="bannerMiddle">
<p>Staged Title (BAD)</p>
</div>

What does affect a container's dimensions?

So I have the following structure:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
</div>
With no CSS, the containing div extends to the image height, which is on the left side of the div.
Now I want to put that image on the right of the div instead of the natural left. If I use float: right; on the .logo class, the <a> element is taken out of the flow so my containing div won't extend to the picture height anymore (it will have a height=0).
I tried to wrap the <a> element into another div and give the logo class to it (in case it needs to be a block element), but same behaviour.
So I'm realizing I have no idea how to attach an element on the right of its container, with the container still taking into account the dimensions of said element. Is it possible?
You're doing fine, you just need a clearing element before you close your container in order to make the floated elements "occupy" the parent's space. Something like this should work:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
<div class="clear"></div>
</div>
CSS
.clear {clear: both;}
In case of images, you can use the traditional html align="right" tag to put the image on right side of the content and keep the other aspects of styling the same.
The align="right" tag goes in the IMG html element.
Given this CSS:
.logo {
float: right;
}
… you can get the div to grow by adding this CSS:
#bannerLogin {
overflow: hidden;
}
That's due to the fact that an overflow with a value different from visible creates a new block formatting context.
Snippet
#bannerLogin {
background: #fed;
border: 1px solid black;
overflow: hidden;
}
.logo {
float: right;
}
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="http://placehold.it/100x100" style="border:none;">
</a>
</div>

linking 2 divs instead of only text

i have several images, with the image i have a link(text).
However i want both the text and image to click-able rather than just the text.
This is my code: html:
<div id="testimage">
<div id="a1">Awards</div>
</div>
(another image) :
<div id="testimage1">
<div id="a2">Events</div>
</div>
css:
#testimage {
background-image: url(images/mja1.jpg);height: 205px;width: 322px;
}
#a1 a
{position: absolute;font-size: 25px;color: #085da2;top: 503px;}
#a1 a:hover
{color:#085da2;opacity:0.5;}
as you can see the a1 has a link, however i need a link to testimage too.
i have tried :
HTML
<div id="testimage"></div>
CSS
a{ display:block; }
with this; when I added the 2nd image, the whole page started to look different.
So am looking to have a link for both div.
I think this is what you need.
<a href="http://mja.co.uk/Events">
<img src="images/mja1.jpg"/>
<span id="a2">Events</span>
</a>
a { display: inline-block } will "expand" the clickable area of the link to the full size of it's containing element, in this case, the <div>, yet holds the layout.
Just wrap the div in an a tag... <div id="whatever">The text</div>

How to have images in line with text in css

I'm creating the footer of my website using html and css.
I want to have the two facebook and twitter images in line with the text so that everything in the footer is in line with eachother
At the moment my footer code is
HTML -
<div class="footer content">
<img src="Images/facebook.png">
<img src="Images/twitter.png">
<p> Address line 1
Address line 2
Address line 3
</p>
</div> <!--end of footer-->
Can anyone help please?
<p> tags are block-level elements. Use an inline element such as <span>:
<div class="footer content">
<img src="Images/facebook.png" />
<img src="Images/twitter.png">
<span>
Address line 1
Address line 2
Address line 3
</span>
</div>
Alternatively, if you're able to use CSS, you can define both elements as inline-block:
.footer.content > img,
.footer.content > p {
display: inline-block;
}
Example 1 jsFiddle
Example 2 jsFiddle
EDIT: It might also be wise for semantics to use <address>, rather than <span>. For example:
<div class="footer content">
<img src="Images/facebook.png" />
<img src="Images/twitter.png">
<address>
Address line 1
Address line 2
Address line 3
</address>
</div>
Since <address> is also a block-level element, you'll need to include the correct CSS as follows:
.footer.content > img,
.footer.content > address {
display: inline-block;
}
Final jsFiddle example
.content img, .content p {
float:left
}
float: left/right - depending where you want it to be
The simplest way is to use <span> instead of <p>. <p> makes a new paragraph which is quit "independent".
Check out this working example here.
.channels li {
float: left;
margin-left: 0.625em;
}
If you want to use new tags specific for footer and address this is my example:
<footer id="footer">
<span><img src="Images/facebook.png" alt="some text" /></span>
<span> <img src="Images/twitter.png" alt="some text"/></span>
<span>
<address>
Address line 1
Address line 2
Address line 3
</address>
</span>
</footer>
#footer {display:inline;}
#footer address {display:inline }
The alt to images was added to help with disability and standards.
I find a lot of the time I need to adjust the position of the image to align with the text. You can do this by wrapping the text and image in a div with position relative and then assigning position absolute on the image. Then you ca add top and margin left to adjust the position relative to the text. https://jsfiddle.net/edhescqn/3/
HTML:
<div class="amazonLink">
<a href="#">
<div class="amazonLink__text">Buy Now on Amazon</div>
<img class="amazonLink__image"
src="http://cdn2.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-amazon-1.png" width="24px" height="24px">
</a>
</div>
CSS:
.amazonLink {
position: relative;
margin-top: 10px;
}
.amazonLink__text {
display: inline-block;
line-height: 40px;
}
.amazonLink__image {
display: inline-block;
position: absolute;
top: 8px;
margin-left: 5px;
}
Use display:inline-block css property for image ad text to display image and text in same line

How to set width of the floating div relative to neighbour

I have a page which looks like this:
Content contains a static table of fixed width (determined by content) inside a centered div. Below content there is a div that contains a line of text and an image below that text. It is meant to float on the left of the Content. The page and image has max-width and max-height. But when page is resized, Image shrinks twice slower than the page. This causes the page to look like this:
I want Image to always be filling the most of that white gap on the left. When the page is resized, the Image should also resize accordingly.
http://jsfiddle.net/FZ4KG/
Html:
<section align="center">
<h4 align="center">Heading</h4>
<div align="center">
<table>Content</table>
<div id="image_box">
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
</section>
Css:
#image_box {
padding-left: 15px;
height: 0px;
top: -75px;
position: relative;
}
#image {
float: left;
max-width: 20%;
}
A few things before I'm able to fully comprehend what it is you're looking for.
It's strange how you're using the HTML5 <section> tag with a deprecated, and as of HTML5 removed, align attribute. And still strange the use of an inline style when using css on those elements.
I will assume you're looking to center those elements within their parent containers. To achieve this, you would need to use a set width and set the horizontal margin of the element to auto.
div {
margin: 0 auto;
}
You also have a typo in your mark up. The DIV id says imabe_box. Assume it's supposed to be image_box.
<div align="center">
<table>Content</table>
<div id="imabe_box"> // ID should be set to 'image_box'
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
Please add more code or reply to the answer and we can help you further.