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;
}
Related
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.
I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.
Link to Demo
You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.
I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
Demo
Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>
I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.
The gist of it is the following:
Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.
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>
I have two elements that have variable width, and must share the same space in a div
I created an example in this link:
http://jsfiddle.net/zWVVN/
#test-1: Should look like.
#test-2: Problem situation.
Hi you define hr float left that conditions you must define width of all hr those give to float as like this
Css
#teste1, #teste2 {
width: 300px; }
hr {
border: 1px solid green;
background: red;
height: 25px;
float: left;
width:200px;
}
h2 {
float: right;}
#teste1 hr{
width: 230px;}
HTML
<div id="teste1">
<hr>
<h2>conteudo</h2>
</div>
<div id="teste2">
<hr>
<h2>conteudo</h2>
</div>
Live demo http://jsfiddle.net/rohitazad/3e6bd/2/
If you want both divs to take up the whole space and do not want to wrap text down, then why have u set the width for both the divs to 300px. Remove the width assigned to both the divs and make both HR to float left.
#teste1, #teste2 {
//this class not needed
}
hr {
border: 0;
background: red;
height: 5px;
float: left;
}
h2 {
float: left;
}
Demo : http://jsfiddle.net/3e6bd/3/
I am having issues with the below HTML when resizing the window;
1: Right bar suddenly drops down when the width is resized too small.
2: Spacing between the content and right bar gets larger as the width gets larger.
<style type="text/css">
#content {
width: 80%;
float: left;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="content">contents</div>
<div id="rightbar">
link 1
link 2
link 3
</div>
There are two ways to get the result you want:
put the right bar before the content
in the html, remove the width from
the content and give it a right
margin instead (width of the right
bar + something extra)
position the right bar absolutely on the right, remove the width from
the content and give it a right
margin instead (see number 1.)
By the way, the problem is that you are mixing absolute and relative widths and what you see is exactly what you are supposed to see.
Edit: After re-reading your question, I think that with overflow:hidden (makes it a nice square block) on the content part, you can get it to work in combination with 1. without the margin:
<style type="text/css">
#content {
overflow: hidden;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="rightbar">
link 1
link 2
link 3
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>
Once you resize too small, the percentages width will be smaller than the text content within your element. The browser cannot concatenate words, so the element is forced to have a min-width. Try putting the elements in a wrapper with an assigned min-width.
Between these two bars you have a space of 3%. 3% of 1000px is 30px. 3% of 2000px is 60px. Therefore if you right element is floating right, it makes sense you'll see that additional space. Try floating the element left.