I want to position a paragraph to the right of an <iframe> of a Google map.
I do not know how to show my code, so here is a screenshot of what I want:
Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):
css
.google_map{
width:55%;
margin-right:2%;
float: left;
}
.google_map iframe{
width:100%;
}
.paragraph {
width:42%;
float: left;
}
.clearfix{
clear:both
}
html
<div class="google_map">
<iframe></iframe>
</div>
<div class="paragraph">
<p></p>
</div>
<div class="clearfix"></div>
You have two options, either float:left or display:inline-block.
Both methods have their caveats. It seems that display:inline-block is more common nowadays, as it avoids some of the issues of floating.
Read this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ or this one http://www.vanseodesign.com/css/inline-blocks/ for a more in detail discussion.
You can simply use a div to make a container and display: flex; to make the content appear side-by-side like this:
.splitscreen {
display: flex;
}
.splitscreen .left,
.splitscreen .right {
flex: 1;
}
<div class="splitscreen">
<div class="left">
Content
</div>
<div class="right">
Content
</div>
</div>
None of these solutions seem to work if you increase the amount of text so it is larger than the width of the parent container, the element to the right still gets moved below the one to the left instead of remaining next to it. To fix this, you can apply this style to the left element:
position: absolute;
width: 50px;
And apply this style to the right element:
margin-left: 50px;
Just make sure that the margin-left for the right element is greater than or equal to the width of the left element. No floating or other attributes are necessary. I would suggest wrapping these elements in a div with the style:
display: inline-block;
Applying this style may not be necessary depending on surrounding elements
Fiddle:
http://jsfiddle.net/2b0bqqse/
You can see the text to the right is taller than the element to the left outlined in black. If you remove the absolute positioning and margin and instead use float as others have suggested, the text to the right will drop down below the element to the left
Fiddle:
http://jsfiddle.net/qrx78u20/
For your iframe give an outer div with style display:inline-block, And for your paragraph div also give display:inline-block
HTML
<div class="side">
<iframe></iframe>
</div>
<div class="side">
<p></p>
</div>
CSS
.side {
display:inline-block;
}
Use either float or inline elements:
Example JSBIN
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>float example</div>
<div><div style="float:left">Floating left content</div><div>Some content</div></div>
<div>inline block example</div>
<div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>
Like this
.block {
display: inline-block;
vertical-align:top;
}
JSFiddle Demo
You can use float:left to align div in one line.
Fiddle
You can float the elements (the map wrapper, and the paragraph),
or use inline-block on both of them.
Wrap the iframe in a class, float that left.
The paragraph with then be forced up and to the right as long as there is room for it.
Then set your paragraph to display:inline-block, and add some left margin to tidy it up.
<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>
.left { float: left; }
p { display: inline-block; margin-left: 30px; }
Here's a fiddle: http://jsfiddle.net/4DACH/
Put the iframe inside the <p> and make the iframe CSS
float:left;
display:inline-block;
give your boxes the class foo (or whatever) and add the css
.foo{
float: left;
}
Related
I am very new in HTML and CSS development. I wanted all children in my div parent align horizontally
My HTML :
<div class="parent">
<h1>Hello</h1>
<h1>World</h1>
</div>
I tried using inline-block on .parent like the others suggested but still the output is :
Hello
World
instead
Hello World
any ideas?
The property you're looking for is display: inline; this will make each tag render like it is "inline with each other".
.parent h1 {
display: inline;
}
You could also float the tags, but I would avoid doing that as it would break the flow of text if you were to add any other tags within the .parent container.
Example JSfiddle
Consider looking at float:left.
.parent h1 {
float:left;
}
<div class="parent">
<h1>Hello</h1>
<h1>World</h1>
</div>
Or even display:inline
.parent h1{
display:inline;
}
<div class="parent">
<h1>Hello</h1>
<h1>World</h1>
</div>
Keep in mind that using float is not recommended here because if you add a new element to the .parent div it will appear next to the h1 elements because those are floating left. +1 to #MathiasaurusRex for pointing that out.
You dont need to align the div, but need to align the h1's:
In your CSS code add:
h1 {
display: inline;
}
Fiddle here
Another approach is as follows:
.parent {
display: flex;
flex-direction: row;
}
<div class="parent">
<h1>Hello</h1>
<h1>World</h1>
</div>
One thing to note here is your choice of tags h1 for children is wrong, headers inserts an empty line before and after the header. As your motive is only to show some text header tag is not the right tag of choice.
I know it's quite annoying, seems that vertical-align in CSS is common pitfall but I really need your help.
I want the text to be always be in "middle" vertical position left to the image (image test.gif has different dimensions)
I have such structure of html elements (unfortunately I can't change it due to system restrictions)
<div class="wrapper">
<div class="logo">
<img alt="some text" src="http://localhost/test.gif">
</div>
<div class="source">some text</div>
</div>
CSS:
.wrapper {clear: both;}
.logo {float: left;}
.source { float: left;line-height: 16px;}
Spent 1.5 hours and no luck. Tried to apply vertical align to different elements with different positioning, etc...Please help!
If you don't need to support IE7, try this:
.wrapper { display: table; }
.logo { display: table-cell; }
.source { display: table-cell; vertical-align: middle; }
Basically, tables give you the option to vertically align to the middle, and by making your divs act like a table, we can mimic that option.
A common issue but is explained well here: http://phrogz.net/css/vertical-align/
Key Points
Specify the parent container as position:relative or position:absolute
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Alright so I have
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
Only one word will go into each div. I want the width of each div to be auto
and I want to word from #2 to be in the middle of the screen using text-align: center; with the word in #1 being displayed directly to the left of #2 and the #3 directly to the right of #2.
I have been trying different css for a while, but to no effect.
Hoping someone has a simple answer.
Simply float all the divs to the left. They will display in order.
<style>
.my-dvis {
float:left;
width:33.33%;
margin:0;
padding:0;
border:none;
}
</style>
<div class="my-divs"></div>
<div class="my-divs"></div>
<div class="my-divs"></div>
text-align: center only applies to inline elements.
jsfiddle
HTML
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
CSS
body { text-align: center; }
div { display: inline-block; }
Have you tried floating id=1 to the left and floating id=3 to the right?
I suggest you to use <span> tag instead of using div tag,because div have a property of taking width 100%.
Or else if you want to use div tag then use in the following manor
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<style>
div{
float:left;
width:33.3%;
}
</style>
I just want to have my anchor in the middle of the screen horizontally, how might I do this?
example
Add the text-align CSS property to its parent style attribute
Eg:
<div style="text-align:center">
example
</div>
Or using a class (recommended)
<div class="my-class">
example
</div>
.my-class {
text-align: center;
}
See below working example:
.my-class {
text-align: center;
background:green;
width:400px;
padding:15px;
}
.my-class a{text-decoration:none; color:#fff;}
<!--EXAMPLE-ONE-->
<div style="text-align:center; border:solid 1px #000; padding:15px;">
example
</div>
<!--EXAMPLE-TWO-->
<div class="my-class">
example
</div>
Q: Why doesn't the text-align style get applied to the a element instead of the div?
A: The text-align style describes how inline content is aligned within a block element. In this case, the div is a block element and it's inline content is the a. To further explore this consider how little sense it would make to apply the text-align style to the a element when it is accompanied by more text
<div>
Plain text is inline content.
example
<span>Spans are also inline content</span>
</div>
Even though there are line breaks here all the contents of div are inline content and therefore will produce something like:
Plain text is inline content. example Spans are also inline content
It doesn't make much sense as to how "example" in this case would be displayed if the text-align property were to be applied.
write like this:
<div class="parent">
example
</div>
CSS
.parent{
text-align:center
}
Two options, that have different uses:
HTML:
<a class="example" href="http://www.example.com">example</a>
CSS:
.example { text-align: center; }
Or:
.example { display:block; width:100px; margin:0 auto;}
Try:
margin: 0 auto;
display: table
try to wrap a div around and add these styles to the div:
width: 100%;
text-align: center;
<span style="text-align:center; display:block;">
Awaissoft
</span>
By default an anchor is rendered inline, so set text-align: center; on its nearest ancestor that renders as a block.
I think you can't do that with inline elements like anchor, span. But to make it work you have to set the display to block.
example
There are many ways.
<!-- Probably the most common: -->
<div style="text-align: center;">Link</div>
<!-- Getting crafty... -->
Link</div>
There are probably other ways too, but these three are probably the most common.
You can try this code:
/**code starts here**/
a.class_name { display : block;text-align : center; }
style="margin:0 auto; width:auto;" Try that.
css cannot be directly applied for the alignment of the anchor tag.
The css (text-align:center;) should be applied to the parent div/element for the alignment effect to take place on the anchor tag.
It is very Simple Anchor(a) is a inline element, it means width of inline element is equal to how much text width is there that much.so if you want horizontal center so you need to convert inline to block element, then add text align center.
<a style="display:block;text-align:center" href="http://www.example.com">example</a>
Just put it between center tags:
<center>><Your text here>></center>
I can float an image on the left and have the text wrap around it no problem just by specifying float: left on the image. Like this:
<div id='foo'>
<img src='bar' alt='baz' style='float: left;' />
Lorem ipsum...
</div>
However if the image is wrapped in a div like the following i cannot achieve the same effect without declaring a fixed width on both the div#image_container and the div#text_container
<div id='image_container'>
<img src='blah' alt='blah' />
</div>
<div id='text_container'>
Lorem ipsum... long text
</div>
Is there a way to keep the flexibility of the first solution and avoid declaring a width and have the div#image_container float next to the div#text_container?
Try setting overflow: hidden on the wrapper div, that should automatically set the div to the width of the image.
OK maybe I misunderstood your question. Do you just want the text to flow around the image? If so, all you should need is this CSS:
#text_container { display: inline; }
#text_container,
#image_container {
display: inline;
}
should do it. Try this:
<html>
<head>
<style>
#top {
float: left;
display: inline;
border: 1px solid green;
}
#bottom {
float: right;
display: inline;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="top">
I'm the top div
</div>
<div id="bottom">
I'm the bottom div
</div>
</html>
But if the content of your div's is bigger than the width you've left for them (which it probably is) then you will struggle. You should really give it a width but the above might work for you depending on how you want to use it.
Instead of the text container use a paragraph tag (<p></p>). It will wrap around the content plus it is more accessible and semantic.