This seems so simple but I seem to be failing at it for some reason. So I have 3 images and each image has a link above it. I want them to appear inline and I can't use a table so I tried divs but they appear one after the other instead of inline. note: my page width is 1000px
<!-- First Div with link and image-->
<div style="float:left;width:33%">
BarTop Epoxy
<img style="margin: 15px;"src="image1" width="300" height="315">
</div>
<!-- Second Div with link and image-->
<div style="float:left;width:33%">
Countertop
<img style="margin: 15px;" src="image2" width="300" height="315">
</div>
<!--third Div with link and image-->
<div style="float:left;width:33%">
Flooring
<img style="margin: 15px;" src="image3" width="300" height="315">
</div>
There are two things you need to check:
That the DIVs are not clearing--they should have clear:none declared or inherited.
That there is enough space in your container for all of these items. Your floats contain elements 300 pixels wide with an extra 30 pixels of margin. Is your container 990px wide? Or even 660px wide? Floats will bump down to underneath the previous float if there is not enough room for them.
By default divs have a display: block; property, which means they will not appear on the same line.
You can fix this by making the display float, like you've done, but you should also add the styling clear: none; to be sure the floated elements are allowed to be side by side.
Alternatively, you could use display: inline-block;, which may work better for what you are trying to do, and here's a jsfiddle with this option.
Related
I have a bootstrap site with a TBS 'page-header', above which I have two images of different height, the first image is given no particular instruction, but the second image is told to float right, such that, regardless of the viewport, the first image will always be on the left and the second image will always touch the right.
The problem here is that I want to align both images to the line provided by the 'page-header' so that the bottom of each image is flush with the other and equidistant from the 'page-header' Hr, but what I'm getting is that the tops are flush with each other - ie, they're aligning to the top. I've used pull-right, vertical-align:bottom on different divs, etc. I haven't changed the Bootstrap.
I can't get it!!!
<div class="row clearfix page-header">
<div class="col-md-12 column">
<div>
<a href="default.aspx">
<img src="img/Logo.jpg" /></a>
<img style="float: right" src="img/cc1.jpg" />
</div>
</div>
</div>
vertical-align:bottom is a bit rubbish.
What I could do is set the empty <div> to position:relative, then on the image you want at the bottom to position:absolute; bottom:0.
I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
I've got a question about positioning of multiple elements with a text right of a "picture". The situation itself is explained below. My question here is how can I best go about positioning the elements. I've tried around a bit with relative positioning, fixated and absolute, but didn't find a good functioning variant. Thus the question is if someone could give me an advice on how to best go about the positioning itself there (what should be put into relative,....)
Situation:
Every "part" consists of a <div></div> with multiple elements in it. Each of these div's includes a heading text, then a picture part and right of the picture some text.
The parts themselves are situated in a <div id="content"> themselves (thus all parts are children of this main div, which is centered horizontally on the screen and situated below the mainmenu (relative)).
The picture part is a div which contains 2 canvases which are displayed at the same position so that a transition effect can be made on mouseover.
The number of "parts" is known and also the elements of which the div consists of don't change.
Detailed picture
Example sourcecode
<div id="content" width="800px">
<div id="part1">
<span class="highlight">Headling</span>
<div id="part1image" class="floatleft">
<canvas height="100" width="100" id="part1image1"></canvas>
<canvas height="100" width="100" id="part1image2"></canvas>
</div>
<span class="text2">Text</span>
</div>
<div id="part2">
<span class="highlight">Headling</span>
<div id="part2image" class="floatleft">
<canvas height="100" width="100" id="part2image1"></canvas>
<canvas height="100" width="100" id="part2image2"></canvas>
</div>
<span class="text2">Text<br/> Text line 2</span>
</div>
</div>
This (link) is the closest I can come. I had to add an extra wrapping <div>, to make sure the headings did not become inline.
A summary of the code:
The elements are inline-block, to make sure they are in line
The .floatleft class has relative positioning, so that the canvases can stack. It also has a fixed width and height because there are no elements in the div that are positioned normally.
I am destroying my mind trying to get this styling done right. I have a fixed size image with an unpredictable height div of text to the right of it. I want the top of the text to line up with the top of the image but to NOT wrap around it. My markup is:
<img height='231px' width='132px' style='float:left' />
<div>Text</div>
I would like to find a solution that doesn't involve using a table, but at the moment I am drained and can't think about how to do it with css/divs
This should do the trick.
<div style="margin-left: 132px">Text</div>
To have space between the text and the image, make the margin larger or add a padding-left.
DanielB's answer nails it, but I just like giving alternative solutions; never know if it might come in handy. You could put the image and the div into a container with a fixed width, set a fixed width on the image and div that adds up to the container's width, and float the div as well.
<div id="container">
<img height='231px' width='123px' style='float:left' />
<div>Text</div>
</div>
#container div
{
float:left;
width: 123px;
}
#container {
width:246px;
}
http://jsfiddle.net/thomas4g/A7ZHg/3/