I have many elements with header of image with static height and some text below. Target is to get that .outer full height as the elements in the row with it. I need that text to get width of image and height to be full as it can be.
This is what i have achieved at the moment.
CSS:
.outer {
display: inline-block;
}
.inner {
background: green;
display: table-caption;
}
.inner>img{
height: 200px;
}
HTML:
<div class="outer">
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg"/>
<p>Useless Text.</p>
</div>
</div>
Here the essential thing is vertical-align:top; I have given a fixed width but you can give width in percentage.
body {
width: 100%;
}
.outer {
display: inline-block;
width: 90%;
}
.inner {
display: inline-block;
vertical-align: top;
background: green;
width: 290px!important;
padding-right: 20px;
padding-left: 15px;
}
.inner>img {
height: 200px;
}
.inner>p {
width: inherit;
}
.inner>img,
.inner>p {
display: block;
}
<body>
<div class="outer">
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never
knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file
some of these away for later use.</p>
</div>
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>This is an awesome text, but i want my element get height of left space up of my image.</p>
</div>
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never
knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file
some of these away for later use.</p>
</div>
</div>
</body>
I have made some adjustments to your code, I have added a class table-div and a class table-row and wrapped those div.outer in div.table-div and div.table-row. You can see it here: http://codepen.io/anon/pen/XboROq?editors=110. I hope this is what you are looking for.
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
I am working on a site that I am building for myself on squarespace which is why I am trying to write this using inline css. I am trying to get an image styled in a row with some text. The image should be 1/12 of the row. I need to do this in html/css because there will be additional, identically styled rows below the one that I am depicting in jsfiddle.
I can't seem to get he image to scale down and fit on the same row as the text, with the same height as the text. I had it working and then accidentally reverted my work... so it's time for a break. Hoping someone will take pity on me before I come back to it.
Here's my JSFiddle with image and text: https://jsfiddle.net/hrwj2u7c/
<div style="display:flex;flex-direction:row;flex-wrap:wrap;background-color:#bcc0c6">
<div style="flex:0 1 150px;">
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
</div>
<div style="flex:1 0 auto;">
<span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording. We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Is this what you're trying to achieve?
<div style="display:flex;flex-direction:row;align-items: center;background-color:#bcc0c6">
<div style="flex: 0 0 150px;">
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png style="width: 100%">
</div>
<div>
<span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
Key points:
flex-basis: 150px; flex-grow: 0; on image container
width: 100%; on <img>
removing flex-wrap: wrap from the overall wrapper (which would cause the second div to go below).
i also added align-items: center to the wrapper, to align the flex items vertically. You can't really match their height, as you'll notice the second div varies in height significantly at various widths of the page, but you can align them vertically.
Now, the biggest problem with what you're trying to do (which is styling inline) is that it cannot be responsive, because you can't apply #media queries by using inline styles. However, what you can do is use <style> tags inside <body>. Example:
<style type=text/css>
.wrapper {
padding: 25px;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
background-color: #bcc0c6;
}
.wrapper> :first-child {
flex: 0 0 200px;
}
.wrapper> :first-child img {
width: 100%;
}
.wrapper> :nth-child(2) {
padding: 0 0 0 25px;
}
.wrapper> :nth-child(2)>span {
font-weight: bold;
font-size: 24px;
}
#media (max-width: 700px) {
.wrapper {
flex-wrap: wrap;
}
.wrapper> :first-child {
margin: 0 auto;
}
}
</style>
<div class="wrapper">
<div>
<img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
</div>
<div>
<span>I'm new to podcasting, and I don't know where to start!</span>
<p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
We'll even be happy to teach you, so that you'll be more educated going forward!
</p>
</div>
</div>
I am learning HTML / CSS basics and I am stuck at the following problem.
I would like to put 3 fixed-size float divs in a fixed-width outside div, and I would only like to have margins between them, not outside them.
My problem is that I don't know how to achieve this. I tried reading about margin-collapse and negative margins but it is quite hard for me to understand.
I have put my example onto the following jsfiddle: http://jsfiddle.net/6dqR6/
HTML
<div class="outer">
<div class="articles">
<h2>header</h2>
<div class="article">
<p>1</p>
</div>
<div class="article">
<p>2</p>
</div>
<div class="article">
<p>3</p>
</div>
<div class="article">
<p>4</p>
</div>
<div class="article">
<p>5</p>
</div>
<div class="article">
<p>6</p>
</div>
</div>
</div>
CSS
.outer {
width: 940px;
margin: 0 auto;
}
.articles {
height: 1500px;
background-color: #fcdda1;
}
.article {
width: 300px;
height: 350px;
float: left;
background-color: #4ecac3;
margin: 0 20px 20px 0;
}
Can you tell me:
What is the recommended way to solve my problem and fix the above example?
Possibly some beginner friendly articles/books from which I could learn about it?
Thanks a lot, and sorry for asking such a beginner level question here.
1) Solution for a basic CSS knowledge
Based on Css2, fully cross-browser
Here is the solution to have only the inner margin, and not applied to the last on the right, click here, the working fiddle.
You have to make a mask to overflow the plus margin:
.outer {
width: 940px;
overflow:hidden;
/*behaves like a mask*/
}
.articles {
width: 960px; /*set the actual width: 320*3*/
}
2) Advanced solution
Based on Css3, only modern browser (except, of course, IE)
The Css nth-child solution is here in this example: jsfiddle.net:
.articles > :nth-child(3n+1) { margin-right: 0; }
You can find here the complete explanation about how it works.
Since IE have a partial support of Css3 upcoming standards, you can use IE conditional Comments to pass specific Css on for InternetExplorer legacy versions (e.g. Css3 Solution for modern browsers, Css2 solution only for old IEs).
Eventually, here are other solutions based on Css pseudoclass and jQuery.
3) Online resources to make practice on CSS
Here is where you can learn a lot about Css in general:
CssTricks
Smashing Magazine
Tuts Plus: CSS categories
This can be thought as "advanced", but I think is the best way, just add to your CSS:
.article:nth-child(3n-3) {
margin-right:0
}
This makes every third element not having right margin, so it wont fall to the next line. That's it.
Beside CssTricks, Mozilla Developer Network is a good resource to learn too.
I have a problem with regards to achieving a specific design goal, and I hope you can help me out here.
I made a picture in PS that I hope explains to you what I want:
Every part of this picture should be in an individual tag (for example div), and be placed like this.
The logo should be placed on top of the big picture, with just a little bit of space between the edges. The name is placed on level with the bottom of the picture OR in the middle (whatever looks best).
The headline (new 911) is placed along with the top of the big picture, the description is in the middle (always middle, length of text will vary) and the footer (info info) is aligned with the bottom of the picture.
Is this something anyone could help me with?
I have some code, but it doesn't work exactly as planned. Here's my HTML:
<div class="content">
<div class="left">
<div class="poster">
<div class="poster_img">
<img src="https://lh6.googleusercontent.com/-cC6WK7FOx_g/AAAAAAAAAAI/AAAAAAAAAAA/QQ41pWU9UUQ/s100-c-k/photo.jpg" height="50" />
</div>
<div class="poster_name">Porsche</div>
</div>
<div class="img">
<img src="http://i1.ytimg.com/vi/k7dEsMCFfFw/mqdefault.jpg" width="220" />
</div>
</div>
<div class="right">
<div class="header">The new Porsche 911 Turbo. Breaking new ground.</div>
<div class="main">With the new Porsche 911 Turbo, we have once again questioned everything and started from scratch. We pushed the boundaries...</div>
<div class="footer">
<div class="info1">info</div>
<div class="info2">info</div>
</div>
</div>
Here's my CSS:
.content {
position: relative;
clear: all;
margin: 5px;
margin-top: 10px;
}
.left {
display: table-cell;
}
.poster {
position: relative;
margin-bottom: -50px;
height: 50px;
}
.poster_img {
display: table-cell;
position: absolute;
}
.poster_name {
display: table-cell;
padding-left: 52px;
font-size: 15px;
}
.img {}
.right {
display: table-cell;
padding-left: 10px;
}
.header {}
.main {}
.footer {}
.info1 {
display: table-cell;
}
.info2 {
display:table-cell;
padding-left: 25px;
}
Hope you can help me out here! :)
Aleksander.
Positioning elements with CSS is not as complicated as it seems (if your design concept is good).
I like using grids to cleanly position elements. However most of the time position: absolute; with a position: relative; on the parent element will suffice.
Read on about this here: Absolute Positioning Inside Relative Positioning
Also try to find a site that has a similar design and explore the source. It looks like porsche would be a good place to start. There are also lots of "Design Inspiration" sites were you might find what you're looking for.
Good luck.
Rather then going into the depths of positioning, you may want to consider a simple float in combination with clear. usually works well enough - given the right stack order.
Simple problem, though apparently not a simple solution.
Example here: http://myhideout.eu/new/
Basically the site consist of two columns, though with no wrappers or anything like it, as I'd really like to do with as little of the sort as possible, partly for the sake of simplicity, but also to make use of the HTML5 semantics, which in my mind don't really include divs, no matter how appropriately they are be named.
However, I'd like to have the sidebar fill up the full height of the adjacent column, which is not as easy as I first thought it would be. I know it's an old problem, but I was sure I had solved it before.
Anyhow, I tried to figure out how to do it without using wrappers or JavaScript. JavaScript is a no go, but that's another story. I was sure that there would be some sort of smart CSS3 feature or something similar, that would solve my problem, without the need for wrappers, but my search for this much need feature was a failure of epic proportions.
So I said to my self: "Damn it! Oh well, just have to use wrappers then."
I was sure it would work. I tried different configurations, but no matter what I did, I couldn't get it to work without setting an absolute height of the surrounding wrapper. Just imagine my disappointment, failing once again when I was sure I had done it before. So again I went searching for a solution to suit my needs. Though a lot more material turned up this time, it was still a failure. The few solutions I found was questionable to say the least.
So, now I'm here again, asking yet another one of those questions which undoubtedly have been asked a quadrillion times before. I am sorry about this, but I really don't know where else to go.
I do hope you can help.
Thanks in advance and best regards.
edit:
This works exactly as I want it too:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
width: 800px;
}
#wrapper > article {
margin-right: 200px;
width: 600px;
background-color: blue;
}
#wrapper > aside {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<header>This is a header</header>
<div id="wrapper">
<article>
This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left
</article>
<aside>
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</aside>
</div>
<footer>This is a footer</footer>
</body>
</html>
Only problem left is getting rid of that damn div tag ;)
edit:
the css table display properties have been pointed out to me, and it really seems to be what I'm looking for, as the smart solution, but with multiple elements in one row, and only one in the other, I can't figure out how it should be done.
If IE6 compatibility is not a requirement, then I usually will usually do the following html:
<div class="container">
<div class="content">
This is the content
</div>
<div class="sidebar">
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</div>
</div>
And this is the CSS:
.container { position:relative; }
.content {margin-right:<SIDEBAR WIDTH HERE>;}
.sidebar {position:absolute; top:0; bottom:0; right:0; width:???; }
JSFiddle example: http://jsfiddle.net/geC3w/
This works in all modern browsers and Internet Explorer 7 and above, it's also immensely simple, as long as IE6 compatibility isn't a requirement
If IE7 compatibility is not a requirement, use display: table-cell;:
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
}
#wrapper > * {
display: table-cell;
}
#wrapper > article {
width: 600px;
background-color: blue;
}
#wrapper > aside {
width: 200px;
background-color: green;
}
Working example.