I want to add an iframe to the right of the vertical-alignment
http://s13.postimg.org/s5f54mux3/Screen_Shot_2015_07_30_at_4_45_06_PM.png
The code to it is:
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
</span>
</span>
</div>
How do you add an iframe to float on the right of the vertical-alignment, like so...
http://s30.postimg.org/5qfa3x8o1/Screen_Shot_2015_07_30_at_4_45_06_PM.png
I think the best solution would be to add a float:right and position it as the last element of the span that contains the user information.
I think I placed it correctly below but the code you posted is missing the top half, making it kind of difficult to guess what is what..
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
<iframe style:'float:right;'></iframe>
</span>
</span>
</div>
To put an element on the right, you can either use float: right or absolute positioning. Personally I would use absolute positioning. Here is a solution:
#theIframe {
position: absolute;
top: 0;
right: 0;
}
Also make sure the containing element is position: relative (or any other position except the default "static".)
I'm reluctant to butt in where a solution seems to have been reached but I'm wondering why one wouldn't use Flexbox. I understand that it's not supported in IE9- but the data at Can I Use suggests that this is a negligible concern and that cross-browser support is wide. Can I Use Flexbox (Note: review both the "Current Aligned" and "Useage Relative" data.)
With that in mind, would you consider something along the lines of the following.
//HTML
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<div id="Flex-Container">
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
<div id="Responsive-Iframe-Container">...</div>
</div>
</span>
</span>
</div>
//CSS
#Flex-Container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
#Responsive-Iframe-Container {
width: 45%;
}
The HTML and CSS for the markup inside #Responsive-Iframe-Container can be found in the Pen Responsive Iframe - Flexbox.
Of course, instead of using #Responsive-Iframe-Container, one could simply substitute <iframe src="#"></iframe> styled as desired.
I am a beginner autodidact in HTML and CSS, so if there is something wrong with the suggested code, please forgive me and please let me know what it is.
Related
Thanks Jax-p for linking me to this answer. It shows more correct ways of dealing with this issue. I still don't know why inline-block is working the way it is, though.
I have an Electron app showing data transfer for different users and a limit on total transfer,
like this
<span>
1 MB / 2 GB
</span>
However, in rtl languages this shows up strangely:
<span dir="rtl">
1 MB / 2 GB
</span>
I stumbled upon a solution using inline-block styling
#c > span {
display: inline-block;
}
<span id="c" dir="rtl">
<span> 1 MB </span>
/
<span> 2 GB </span>
</span>
This works, but I don't understand why. RTL users are a decent portion of my user base and so I don't want to throw a hack in I don't understand. Is this just a happy accident or is there something deeper about inline block styling that I don't understand?
Note: This doesn't work if I don't put the individual components in separate spans -- if the parent span is given inline-block styling it doesn't change the display order.
You second example works due to the nature of inline-block elements. They are inline level elements but create block container. In other words, they create an isolated world that cannot interact with the outside.
The direction property will work inside both inline-block element separately so there is no interaction between their content.
The main steps are as follow:
apply the direction algorithm inside each inline-block elements
apply the direction algorithm between both inline-block elements
Without inline-block, the whole text will be considered in the same direction algorithm
To better illustrate the isolation:
#c > span {
display: inline-block;
width:20px;
height:20px;
}
#c {
float:left;
clear:left;
}
<div id="c" >
<span style="background:red;"> </span>
<span style="background:blue;"> </span>
</div>
<div id="c" dir="rtl">
<span style="background:red;"> </span>
<span style="background:blue;"> </span>
</div>
The above illustrate the step 2
And the below the step 1
#c > span {
display: inline-block;
}
#c {
float:left;
clear:left;
}
<div id="c" >
<span >1 MB </span>
</div>
<div id="c" dir="rtl">
<span >1 MB </span>
</div>
I need to align the second div based on the length of first one. The first div contains some content like article title and user details. The second div contains rating for that title. I have assigned float property for both divs. This works fine if the content inside first div is not too long. But if the title is too long then the title overlaps the rating.
Please let me know if there is some way to fix it.
<div id="result-1095" class="selectedResource">
<div style="float:left;width:67%;">
<p>
<a class="details" id="resource-1095" href="#id:resource1095">
TestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitletest tests tests test testst
</a>
</p>
<p class="articleDetails"></p>
<p class="userDetails">Added by username</p>
</div>
<div style="float:right;" class="yui3-widget component rating" id="ResourceRating-1095">
<span class="rating-content">
<span class="rating-label"></span>
<a onclick="return false;" title="one" class="icon-star-empty"></a>
<a onclick="return false;" title="two" class="icon-star-empty"></a>
<a onclick="return false;" title="three" class="icon-star-empty"></a>
<a onclick="return false;" title="four" class="icon-star-empty"></a>
<a onclick="return false;" title="five" class="icon-star-empty"></a>
</span></div>
<p style="clear:both"></p>
</div>
I have added a fiddle snippet. Somehow yui rating is not visible in fiddle (though i have loaded yui on frameworks ) http://jsfiddle.net/wkj926rq/
You can use word-wrap: break-word for class details
.details{
word-wrap: break-word
}
http://www.css3.com/css-word-wrap/
on other way changing mark up-
You can use display:inline-block; for your divs instead of float;
<div>
<div class="first inlineblock">
</div>
<div class="second inlineblock">
</div>
<div>
css
.inlineblock
{
display:inline-block;
vertical-align:top;
}
Please add the same class on markup ex: .same-width and set width property
You could use flexboxes setting container to:
.wrapper , #result-1095{
display: flex;
flex-flow: nowrap;
}
PS: if you paste a fiddle(snippet) it's more testable
Maybe you should try giving width to the the title (class="details").
Hi having some issues here trying to stack image and text on the same line left to right.
<div style="position: absolute; top: 200px; left: 30px;">
<span style="float: left;">
<img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
</span>
<p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
Remember User ID?
</p>
</div>
Your Code
http://jsfiddle.net/21Ltsbeb/
Improved
http://jsfiddle.net/21Ltsbeb/1/
I'm not seeing the issue? Though, you might be better off using display:inline-block with matching html elements. Inline as in Have these elements in the same line
.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}
<div>
<span>
<img class="tglbtn" src="http://www.placehold.it/66x66">
</span>
<span>
Remember User ID?
</span>
</div>
Edit
A few things I should note that you need to address as a beginner.
Don't use inline css
Don't use pixels (rem,em,or %)
Avoiding using position absolute
Don't use floats
Remember that good web applications have great continuity in their structure.
Until you get the hang of CSS, I might recommend Foundation's CSS or Bootstrap CSS.
This could be cleaned up a lot for you, and also simplifying your css/removing a lot of the inline styling:
.mind{
display:inline-block;
vertical-align:top;
}
.tglbtn{
height:20px;
}
<div class="wrap">
<img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
<div class="mind">Remember User ID?</div>
</div>
Set the paragraphs top margin to 0
margin-top:0;
It's being set by the browser default otherwise (I see the mis-alignment in chrome).
See this fixed Example
I am not sure how to get the following behaviour using a combination of HTML and CSS:
foo = this
foobar = bit
goso = needs
etcetc = aligning
Now I could just insert spaces where required (like I did above), but I'm pretty sure there must be a way to do this "automatically".
I know I could use tables to do this, but would prefer not to. Is there any other way of doing this?
My question boils down to this: How do I automatically align text vertically, in a similar way to tabs in office suites, using HTML/CSS.
Here is an in context example:
<p><span class="a">foo</span> <span class="b">=</span> <span class="c">"abcDeveloper"</span></p>
<p><span class="a">bar</span> <span class="b">=</span> <span class="c">"123"</span></p>
<p><span class="a">foobar</span> <span class="b">=</span> <span class="c">"dfg"</span></p>
<p><span class="a">foobarstar</span> <span class="b">=</span> <span class="c">"456"</span></p>
In this example, I would like text in class b to be aligned vertically.
Thank you in advance!
One method would be to apply display: inline-block; to your span.as, and then give them a set width: http://jsfiddle.net/nzrHn/1/
.a { display: inline-block; width: 100px; }
Add css attribute display: inline-block and min-width: XXXpx
I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.
Here's how it looks in IE7 (wrong):
Link (cannot post images as a new user)
In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user
Don't mind the element order as it's random. Elements are dynamically generated by jQuery.
HTML code:
<div class="ui-sortable" id="area">
<span class="object">: </span>
<span class="object">1998- </span>
<span class="object">ISSN 1392-4087</span>
<span class="object">, </span>
<span class="object">. </span>
<span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">Vilnius</span>
<span class="object">1998- </span>
<span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>
CSS code (irrelevant info like fonts & colors removed):
#area {
min-height: 160px;
width: 760px;
}
.object {
display: block;
float: left;
text-align: center;
width: auto;
}
Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?
I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.
See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg
You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.
Why not leave it inline? If you need a box, add padding:
span.object { padding: 6px; }
Edit: if you don't want them to break across lines add:
span.object { white-space: nowrap; }
Far easier than getting floats to do this particular task.