Please help.
I need to position an svg inside a div, next to a headline. It's a rectangle, kind of a corporate design element. Code:
<div id="container">
<h1>HEADLINE</h1>
<img src="/my/rectangle.svg">
</div>
It should look like:
HEADLINE ▮
But in the case of
WRAPPED
HEADLINE
the rectangle should scale up, stretching over two lines, keeping its aspect ratio.
So my problem is:
I can't set the height of #container, because I don't know how many lines of text will be in it. When I do as suggested here, meaning say
#container {position:relative}
#container img {position:absolute; height:100%}
the svg will stretch to the right size, but it will overlap with the headline.
Any ideas? Thanks!
Edit: Maybe this has nothing to do with svg. Could be any child element that needs to be scaled to parent width. The challenge is that one aspect of the problem requires it to be relative, and the other one requires it to be absolute.
The simplest option is probably to use display: flex and use background-image for the SVG.
.heading {
display: flex;
}
.heading h1 {
margin: 0;
}
.heading .img {
flex: 1 1 auto;
background: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/obama.svg) no-repeat;
}
<div class="heading">
<h1>HEADLINE</h1>
<div class="img"></div>
</div>
<br/>
<br/>
<br/>
<div class="heading">
<h1>WRAPPED<br/>HEADLINE</h1>
<div class="img"></div>
</div>
Related
This is a hard one to explain, so I'll do my best.
As it stands now, I have a wrapper div that has the iceberg image as it's background. It's styled in that the background image sizes to fit the user's screen. Within that wrapper div, I have two .rows, each containing a column.
Now the tricky part: I want one row to just span the top of the water, with the other spanning the bottom of the water. Here's a rough concept.
Right now these rows are given a min-height to match that horizon, however when the user resizes their screen or has a different browser width than my dev environment, of course it doesn't work the same.
Now, how can I go about getting these rows to match heights with the background image? I had considered slicing the image into two, but I imagine there's got to be a much more resourceful way. Here's the CodePen I'm working with: http://codepen.io/jwindeknecht/pen/qOqwPp
If you can offer any advice or if I can clear anything up, let me know! Thanks.
<div class="hero">
<div class="row over">
<div class="large-6 large-offset-6 columns">
<div class="inside">
<h1>Hello World</h1>
</div>
</div>
</div>
<div class="row under">
<div class="large-6 large-offset-6 columns">
<div class="inside">
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
.hero {
background: url(http://i.imgur.com/fdRuNIF.jpg) center top no-repeat;
background-size: cover;
min-width: 100%;
div {
display: table;
.inside {
display: table-cell;
vertical-align: middle;
}
}
}
.over div { min-height: 275px; }
.under div { min-height: 275px; }
Okay! I figured this out. I know the dimensions of the image, so I had the min-height of the row set to a certain percentage of the the width of the image.
e.g. The image is 1500px wide. The row that covers just the horizon is 300px high. Therefor the min-height of the row is set to 20vw.
So regardless of the background image width, the height of the row matches up due to using the vw. Here's a pen example: http://codepen.io/jwindeknecht/pen/RWyBGW
And the new code is simple:
.over div { min-height: 275px; }
to
.over div { min-height: 20vh; }
I have a container with 3 children elements.
<div class="container">
<img />
<div class="element1"></div>
<div class="element2 bottom"></div>
</div>
They must be positioned as shown on the diagram below:
image is in the top of the left column and nothing goes below it (it is the only element in the left column)
element1 is in the top of the right column
element2 is stick to the bottom of the right column (and must not collide with the element1 which is above it)
Does somebody know how to achieve such layout using pure CSS? Ideally I wouldn't like to add any markup, but I can do that if that's the only possible way.
The biggest problem I'm facing here is how to stick that second element (non-image) to the bottom of the container without removing it from the flow. Because if I use position: absolute and remove it from the flow, the elment above it can collide with it (both elements have unknown height).
Here's a pen to work on: http://codepen.io/anon/pen/yNwGvQ
I would suggest you to use two columns in your html and then use the property display: flex; for your right column as suggested in the article A Complete Guide to Flexbox.
http://codepen.io/AlexisBertin/pen/QboYyY
All the HTML:
<div class="container">
<div class="column column-left">
<div class="image">This is an image</div>
</div>
<div class="column column-right">
<div class="element1">This container has dynamic content so it's height is unknown and may change.<br/><br/> Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</div>
<div class="element2">This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
Part of this CSS:
.column {
float: left;
height: 100%;
}
.column.column-left { width: 100px; }
.column.column-right {
width: calc(100% - 100px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
Hope you get the idea. Good Luck'.
EDIT:
The easiest way to achieve this without declaring height to the container seems to only create a third parent div to the first block of the second column and define it as flex: 1; while the second block of this same second column would be define as flex: 0;.
http://codepen.io/anon/pen/yNwZmJ
More details explained in the comments.
The easiest solution I figured out is this one:
First you create this CSS:
.container {
width: 400px;
padding: 10px;
border: 1px solid red;
background-color: white;
}
.container > img {
float: left;
}
.container > div {
position: relative;
overflow: auto;
padding-left: 5px;
min-height: 120px;
}
.container > div > .bottom{
position: absolute;
bottom: 0;
display: block;
}
And then use these divs, depending on your content. The first one you use when you know your text is short:
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
</div>
<div class="bottom">
<p>This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
The second one you use when you know your text is long
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
<p>Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</p>
</div>
<div>
<p>This container also has dynamic content so it's height is unknown and may change</p>
</div>
</div>
</div>
The difference is that you remove bottom class from the last div in your div that has long text.
Also in your CSS you can see .container > div{... min-height: 120px; ...}, you should set it to height of your image. In case you want the bottom text more down then you have to increase min-height to be bigger than your image height.
Here is it in action: http://codepen.io/anon/pen/YXgBXx
I have a simple problem with divs. How can I float 3 DIVs inside one DIV that's not floated?
Here is my code:
<div style="margin:0 auto;width:1240px;border:1px solid #000000;">
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
<div style="width:200px;height:50px;float:left;border:1px solid #000000;">
test
</div>
</div>
I want to float child DIVs inside this parent DIV or a way to center them without floating...display:inline-block won't work for the child divs as they are of different heights and one div is an image...so i think the best way is to float them and optimize the margins...In this case i want the parent div to be centered across the screen so i use margin:0 auto instead of float but this leads to the child div not stretching the parent div and it appears as a thin line.
You can test the fiddle I created to understand the problem:
http://jsfiddle.net/tQpM5/
Thanks
If I understand correctly, you want to center 3 boxes on the same row:
.wrapper{
margin:0 auto;
text-align:center;
vertical-align: top;
}
.box{
width:200px;
height:50px;
display:inline-block;
text-align:left;
}
HTML:
<div class="wrapper">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
</div>
demo
Since all the child divs widths are less than that of the parents, they should naturally line up side by side. Try give each child div a position: relative; margin: auto. This way they should center themselves with in the parent
The parent div appears as a line because its contents is floating, settings its height to 1px. To resolve this you need to clear the floats after this element. Often referred to as clearfix.
.clearfix:after {
clear: both;
content: "";
display: table;
}
Then you can just float the children as normal. I used margin: auto on the parent to make it centered.
See this demo:
http://jsfiddle.net/c2NjZ/
Note for old browser support on clearfixing see:
http://css-tricks.com/snippets/css/clear-fix/
The container div's float and it's child div's float values (or no float) are independent of each other, you just need to clear the child div's before you close the parent div:
<style type="text/css">
.clearfloat {clear:both;height:0;font-size:1px;line-height:0px;}
</style>
<div class="parent">
<div class="child" style="float:left;">
Hi
</div>
<div class="child" style="float:right;">
There
</div>
<br class="clearfloat">
</div>
Update to your example: http://jsfiddle.net/tQpM5/2/
What you need is to give the parent div: overflow:hidden; so it can contain its child div.
Child divs will float beside each other, however when you re-size your browser, they will float under each other, to avoid this, you can give the parent div a min-width.
To center the parent div, you can give it a margin-left:auto; margin-right:auto;, however you must specify a width so that it does not stretch and take all its available width.
Since you chose to use floats and not inline-block, then the only thing left is to deal with margins just like you said.
DEMO
I'm thinking this isn't possible, but I'm not a CSS expert, so I thought I'd check. I've got a translucent div absolutely positioned over an image. That's good so far, but I'd like to force my translucent div to respect the box in which it and the image are contained.
<div class="parent">
<div class="title-bar"> /* prolly not important */
<h2>Title</h2>
</div>
<img src="whatever"/>
<div class="overlay">
A few lines of txt
</div>
</div>
The more I think about it, the more I think I may be asking for too much - I want the parent to expand with the img, but the overlay to be constrained by the parent. Can this be done?
To force the container expand with the child img, make it float.
To force the overlay relate to container position and size, make the container relative.
.parent {
float: left;
position: relative;
}
To force the overlay respect the bounds of the container, use percents.
.overlay {
position: absolute;
max-width: 100%;
/* And then, position it at will */
top: 0;
left: 0;
}
I've prepared an example: http://jsfiddle.net/rYnVL/
It's doable, but not quite beautiful :
<div id="parent">
<div id="abs">stuff fadsfasd fsad fasdsdaf </div>
<img src="/img/logo.png" />
</div>
#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}
#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}
Main point to note :
parent floats to not have a 100% width. Position is relative.
abs is absolute, with 100% size.
also, if abs content is bigger than the image, it will overflow. If you do not like this, just add overflow:hidden.
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.