There's probably an answer to this one, but despite 20 minutes of searching I can't find it.
I have an <iframe> (Embedded Google Maps) which I want to put on the right side of my content div, but it keeps on interfering with the text in the box. It won't allow me to put the text and the iframe side-by-side (but insists on putting one on top of the other).
I've tried multiple varieties of text-align, float and clear. Absolute position sort-of right thing, but leaves the box misshaped and I don't think it is the 'right' way to do it.
As for code, there's not much:
<div>
<iframe>
<h1>Header</h1>
Lorem Ipsum
</div>
First one happens, should be like the second one:
Float them side by side in container-type boxes
.inner-box {
width: 50%;
float:left;
}
Have a look at this Fiddle;
http://jsfiddle.net/wyj5tb22/2/
Related
For a class project, I'm currently constructing a personal website as a project from scratch in an attempt to learn HTML and CSS. My site is coming along just fine, until I get to adding text.
Below is a screenshot of my homepage. As you can see in my first image my h3 text is scrunched up on the bottom of the page, and the h3 elements are overlapping/stacked on top of one another. I have no idea why this is happening. I wanted to make the text underneath the h1 tags and nicely spaced out to make a landing page, see the mockup.
The HTML and CSS code can be found below:
I am having a similar issue is evident in my other pages as well. For example, on my About page, I envisioned it having a red gradient background with white text on it spaced throughout. Instead, I get this scrunched up text in the center of the page:
The CSS for this section can be found on the CSS image above, but this is what some of my HTML looks like
I'm sure my text overlapping issue is a quick fix, but I have no idea what it's doing or why. If anyone could help me out that would be great. Thanks
the overlapping is caused by either position:absolute, margin-top or top element in your bodyText class. Just remove the top and margin-top from bodyText class and put them in another class. use different padding for different paragraphs. here you are using same padding for all of your paragraphs so they ended up coming in the same place.
.bodyText{ margin:auto}// put other elements except top and margin-top and position:absolute
.paddingtop50{ top:50%}
.paddingtop70{top:70%} // don't use this if not required
<p class="bodyText paddingTop50">Loren ipsum dolor sit amet<\p>
<p class="bodyText">Loren ipsum dolor sit amet<\p>
You are seeing the overlap of text because of the position: absolute set on your h1, h3 and .bodyText.
Both your h3 elements have top set to 100%. This means both will try to position themselves at 100% (of the height of the containing block) down from the closest relatively positioned element, which I'm guessing is the body element in your case.
This is the same for your two p elements as well with the class of bodyText. Both have top:50% set, which will make the elements appear in the same position, causing the overlap.
If you are looking to vertically center your text in the screen, there are better ways to do that.
I'm looking for a HTML/CSS solution to a problem we've encountered on a site we're building.
I am happy to implement a JavaScript based solution if I need to, but I'd prefer it was handled natively.
We have content managed text which needs to sit inside a designated area but wrap if it exceeds the available width.
Behind the text is a background colour with opacity.
When the text is short, due to the float, the container collapses to the width of the text.
When the text is long, and a wrap occurs, the container hangs out at the maximum width, even though the text inside has wrapped underneath, so there's a small section of background colour on the right side (which isn't big enough for the wrapped word)
I want the container to collapse to the edge of the previous word so it doesn't "look like" there is space for the wrapped word, when it is very close.
HTML
<div>
<p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>
CSS
body div {
background-color: #AAFF3B;
max-width:80%;
padding:20px;
display:inline-block;
float:left;
}
body p {
display:inline-block;
background-color: #FFAA3B;
position: relative;
float:left;
white-space:pre-line;
clear:left;
}
Here is a JSFiddle: http://jsfiddle.net/nmuot8bm/3/
If you look at the 3rd example, you can see a small amount of padding on the right hand side of the orange box, where the word porttitor has wrapped underneath to a new line but the orange container still sits at the maximum width, despite the float.
If line breaks are introduced by the content editors (e.g. between vestibulum and porttitor as per example 4) then the container collapses correctly.
What I think is happening is the container grows before the text wraps and the browser doesn't recompute the width after wrapping?
Here's a picture of my test case shown in the JSFiddle:
Here is a picture of the fault on the staging site (before separated out to a JSFiddle):
You can see that the text has wrapped, but the container has not collapsed, leaving a big gap of background colour.
n.b. We can emulate this by doing text-align:justify but then the spacing between the words is not consistent with the rest of the text on the site.
edit: I see that this question may be a duplicate. I swear I did research before I posted!
max-width adjusts to fit text?
CSS Width / Max-Width on Line Wrap?
Wrapping text forces containing element to max-width
Shrink DIV to text that's wrapped to its max-width?
I think that the general consensus/conclusion is that it is not possible without bleeding edge CSS and I should use a JavaScript solution.
I have added a few more examples to my JSFiddle: http://jsfiddle.net/nmuot8bm/6/
including the JavaScript solution from here: https://stackoverflow.com/a/33246364/647728
Not possible with CSS...that's the way the inline box model works
JS example/solution can be found on the JSFiddle
If the problem is floated elements collapsing the parent container, there are many solutions; the easiest among them being adding overflow: hidden or display: table to the parent (the thing collapsing). Also be aware that inline-block and floated elements are essentially redundant.
I have a problem with a <div> not sizing up the content (which is two <p> elements). The content is floated.
I have one <p> tag floated to the left
I have one <p> tag floated to
the right
I have one empty <div> tag below with style="clear:both"
Still, the <div> that contains the whole thing is 3 lines tall - not just 1 as it is supposed to be. What am I missing to make it work?
I prepared a fiddle and it works well - it must be an error in your code. Show us some pieces of it.
Example
Be sure to have no paddings/margins/height/lineheight affect your divs and ps (=reset browserdefaults!). Also the parent div needs to be wide enough to hold both p. Also, if you have non-floated content, the order matters.
I believe <p> elements have a default margin, try setting margin to 0px, and that may remove the the spacing.
First, float both <p> tags to the left.
Then, make sure that the <div> has a large enough width to accomodate both of the <p> tags.
You should be able to get them in one line after that.
http://jsfiddle.net/myJ3W/1/
Just to show you why float right might not be a good idea (it really depends on what you're trying to do.. Dialog boxes?)
If you use float: right;, your formatting breaks after the paragraph gets too long:
http://jsfiddle.net/myJ3W/3/
Whereas if you use float: left; for both put them into containers, you can be sure that they will stick within their boxes:
http://jsfiddle.net/myJ3W/4/
Again, really depends on what you're trying to achieve here.
Is there enough space in the outer most <div> so that each <p> is a single line? If not, one will break down below the other. In addition, your clear both <div> will have full line height as well. Here is the style I apply to a class called cb that I apply in those situations...
.cb
{
clear:both !important;
float:none !important;
height:1px;
line-height:0;
margin:0;
padding:0;
}
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
Having problems with CSS, and I think what I want is possible without javascript, but I'm not sure.
I have an article of text that I want to display with 0-3 images(The number is dynamic for each article). I want to display the 3 images all on the right-hand side of the page, with about 200-300px between them. This much I have achieved just by floating the images, using clear, and margins.
The part I haven't been able to do is allow the text to flow between the images in that 200-300px worth of space. I've tried relative positioning to push the images down to the part of the page I want them at, but the blank space reserved for them in the text by floating them stays where it is (i.e. the image ends up on top of text).
Is this even possible without js? The text is also completely dynamic, so I can't use any element in the text as an anchor.
EDIT: Here's some code to explain a little:
The tags:
<div>
<img class="floater" src="get_file.asp?image=1"/>
<img class="floater" src="get_file.asp?image=2"/>
<img class="floater" src="get_file.asp?image=3"/>
<p>lots and lots of text and paragraphs go here....</p>
</div>
The CSS:
.floater
{
float:right;
height:250px;
clear:both;
margin-top:200px;//This creates space between the images, but the text doesn't flow between them
}
You can achieve it only by using extra helper elements.
Look at this fiddle: http://jsfiddle.net/kizu/BwySX/
You just add helper elements with zero width, so they are pushing your floaters with their height, but as they have zero width, the text flows near them almost perfectly.
Not sure that's possible. A margin always pushes everything to the sides.
I'd divide the text into paragraphs, and have only one image per paragraph. Then the image could float inside it.