My problem is fairly simple but has me really stumped.
(The RHS pic is the problem!)
I have a thumbnail with the following css:
float: none;
margin-right: 0;
display: block;
and to the right of that I have some text with the following css:
position: relative;
text-decoration: none;
text-indent: 0;
Now this works great! However, when the user resizes the window the text jumps below the thumbnail which I don't want (I'm using a responsive website)! How can I prevent this happening the text behaving like this?
I have been playing around with it for ages and can't solve this problem:(.
You can add float left attribute to your image and span text, and add to a margin left to your text
.box {
width: 210px;
vertical-align: text-top;
display: table-cel
}
.box img {
float: left;
width: 100px;
height: 100px;
}
.box span.text {
float: left;
width: 100px;
box-sizing: border-box;
}
Can you view an example in jsfiddle: here
As per my understanding, the reason might be:
There may be some float left given to the thumbnail image somewhere
inside the style written for lower screen sizes. The best
thing you can do is, inspect using firebug or something and check
whether any float left is given to the thumbnail image. If so, remove that, or give it as
float as none.
If you are ok with having the entire text below the image when the screen is resized, you can make use of clear: both for lower screen size, which has to be given the text div.
If you could give a link to review, it will be easy to tackle the real problem. Hope my solution helps. Thank you :-)
This appears to do what you want:
<html>
<head>
<style>
img {
float: left;
width: 40px;
height: 40px;
border: 1px solid gold;
margin-left: 5px;
}
.text {
margin-left: 50px;
}
.container {
width: 150px;
border-left: 3px solid red;
}
</style>
</head>
<body>
<div class="container">
<img>
<div class="text">This should stay aligned and not go under the thumbnail.</div>
</div>
</body>
</html>
Related
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
i have problem with displaing divs inline on mobiles. So code works fine in PC's but when i visit my website in mobile i just dont display divs in right way.
Image div is above the div with text (should be inline). This is not case of width because even if i change width of image to just 5px, this small image is still above not right next to.
Example: http://www.filmypodobnedo.pl/matrix/
Whole thing is about listing of similar movies to chosen one (in example matrix), listed movies (IMAGE + TEXT should be displayed inline, that works on PC but not on mobile).
HTML:
<div class="podobny_film">
<div id="zdjecie_podobne">
<img class="featured-project-image" width="100" height="150" alt="Filmy podobne do Equilibrium" src="http://www.filmypodobnedo.pl/photos/Equilibrium.jpg">
</div>
<div id="tekst_podobne">
</div>
CSS:
.podobny_film {
float: left;
width: 80%;
color: #555555;
border-style: dashed;
border-width: 1px;
border-color: black;
padding: 10px;
}
#zdjecie_podobne {
width: 120px;
float: left;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
}
add display:inline-block to #zdjecie_podobne and #tekst_podobne
The div "podobny_film" contains div "zdjecie_podobne" with fixed pixel width and div "tekst_podobne" with percentage width. Try to use a percentage width for the div "zdjecie_podobne" and for the image as well, then it should not break.
#zdjecie_podobne {
width:24%; /*together with tekst_podobne that's 99% so be aware of any margins or paddings that might sum up > 100%!*/
float: left;
}
.featured-project-image { width:100%; }
This should work :) :
#zdjecie_podobne {
width: 120px;
float: left;
display:inline-block;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
display:inline-block;
}
I have seen many topics on this around Stackoverflow, but I still could not find out how to do this on this particular case.
I am trying to display a list in a card fashion, I have a template I developed. It looks like this:
Here I have 3 cards, and in the first one, I displayed where I think divs should be created
I cannot align the text the way I want. I want the Title on top of the Description and both aligned right of the first image. But so far I have gotten nowhere. I have a JSFiddle of what I have so far right here: http://jsfiddle.net/MEaze/
Sorry about the ugly colors, I just needed to "see" the divs.
Make them float, and use div instead p.
.trophy-image {
float: left;
background-color: #FF0000;
margin: 8px;
height: 56px;
}
.trophy-info {
float: left;
background-color: #00FF00;
margin: 8px;
line-height: 28px;
}
updated jsFiddle
You have to make the image float left.
I added:
float:left;
to the image div's css. Is that what you were looking for?
http://jsfiddle.net/2jfSK/
You only have to float the image to left. This div will automatically become a inline-block:
.trophy-image {
background-color: #FF0000;
margin: 8px;
height: 56px;
float: left;
}
To set the description to the middle of the image you can use line-height:
.trophy-info {
//background-color: #00FF00;
line-height: 90%;
}
Here an example.
You have to use float:left
http://jsfiddle.net/cAT2B/
http://jsfiddle.net/y7GJa/
I have also added a second image
You should also use DIV
.trophy-image {
background-color: #FF0000;
margin: 8px;
height: 56px;
float:left;
}
.trophy-info {
background-color: #00FF00;
float:left;
}
I wanted my left right content be centered after zooming in 500% plus on the web page, I have tried so many ways, but still don't have an answer can anyone give me a hand here please.
copy and paste to make a new webpage, you can't see if you paste on fiddle or codewall.
html:
<body>
<div id="lower_body">
<h1>center content</h1>
<div id="outer_warpper">
<div id="outer">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
</div>
</div>
</body>
CSS:
#lower-body {
margin: 0px;
padding: 0px;
}
#outer_warpper {
width: 100%;
height: 100%;
margin: 0px;
padding-top: 2%;
padding-bottom: 2%;
background-color: yellow;
overflow: hidden;
}
#outer {
background-color: black;
text-align: center;
vertical-align: middle;
display: table;
margin:0px auto;
overflow: hidden;
}
#right {
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
#left{
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: grey;
}
img{
widht:100%;
height:100%;
}
h1{
text-align: center;
}
as you can see when it reach 500% (ctrl+mouse scroll), the left and right text is not in the center any more, because it push to left somehow.
can one help me make it? Thank for helping. I had tried the width:% also dont work, some one say it need to be done in #media.
This is a normal behavior...
Your two divs are positioned relatively next to each other. If they can't fit the one next to the other then the second one will reposition itself underneath the first one...
if you REALLY want to make it work on 500% zoom what you can do is:
Resize your divs (example)
Use % widths (example2)
Personally i would go with my second example. The choice though is yours (depending always on why you need to achieve this)
PS: % width was not working because you were using display:table; on the #outer div
This is not a problem or even a bug, it's just the normal behavior of the browser. It's just too much zoom to keep any consistency. I think 400% is the max in this case. If you try it in FireFox, you won't get this problem because it doesn't go till 500%.
It's pretty good to be concerned about zooming in a web page, but 500% is just too much to any page work fine.
Take a look at this fiddle that I found, and resize the result window: http://jsfiddle.net/qPHgR/286/
Here's the css from the fiddle:
.left {
float: left;
}
.right {
background-color: #DDD;
overflow: hidden;
}
I want to achieve the same thing, but I want the right div to have a fixed width (300px) and the left div to expand/contract when the window is resized. I can not figure out how to fix it without changing the HTML order of left and right div in the code. I've experimentet with floats and other attirbutes but can't make it work.
Thanks for your help!
.container {
position: relative;
}
.left {
background-color: #DDD;
margin-right: 300px;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 300px;
}
How about this:
http://jsfiddle.net/7DKX8/2
.left {
float: left;
background-color: #DDD; }
.right {
width: 300px;
overflow: hidden; }
Updated jsFiddle
The floats are important for keeping the two elements next to each other. I added 310 pixels of margin to the right of the left DIV (300 pixels for the right DIV, and 10 pixels as white space). I then used a negative margin-left to pull the right DIV over on top of that margin.
I also added overflow: hidden; on DIV.container to illustrate a simple float containment solution. This can be removed if unnecessary, but you may find it makes the remainder of your layout styling easier.
Is this sort of what you want? http://jsfiddle.net/3ZUas/
The text interferes, but is this what you were going for?
Main thing is float: right;
Check this:
HTML:
<div class="container">
<div class="left">
some text goes here which is just here to change
</div>
<div class="right">
some longer bunch of text to go here, it should stick to the right some longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the right
</div>
</div>
CSS:
.left {
float: left;
margin-right: 300px;
border: 1px solid #000;
}
.right {
position: absolute;
right: 0;
width: 300px;
background-color: #DDD;
overflow: hidden;
}
Hope this works for you...!