I might just be really tired but I can't for the life of me figure out why display: inline-block isn't working to make the parent's width adjust to the size of it's contents. I've tried searching for other solutions but every resource I've found says adding inline-block to the parent should do the trick.
In the example below, I am trying to make the blue square only extend to the edge of the green square, and then ultimately center the contents via margin: 0 auto;:
#intro {
height: 400px;
background-color: red;
}
.slide-txt {
display: inline-block;
width: 30%;
background-color: lime;
}
.slide-box {
display: inline-block;
margin: 0 auto;
background-color: blue;
}
<section id="intro" class="image-slider">
<div class="container" id="intro-slide">
<div class="slide-box">
<img src="http://www.jkoffset.com/assets/images/Packaging1.jpg" alt="same-box-slide" width="150px">
<div class="slide-txt">
<h1 class="title">Headline <span>Goes Here</span></h1>
<div class="caption"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn" href="#">
Learn More
</a>
</div>
</div>
</div>
</div>
</section>
https://jsfiddle.net/eam0mk47/
Using width:30%; in the div child (.slide-txt) will make the parent div expand to fill the other 70%, so to avoid that and make it adjust according to content you need to use px instead of % in the div child.
In that red #intro is a div with the class .container ... this element has padding left and right via bootstrap.
Just remove that padding:
https://jsfiddle.net/eam0mk47/1/
#intro .container {
padding: 0px;
}
Or don't use that class there.
Related
I have a parent div with two other elements, one contains the text content, another may contain a picture. The picture and text might vary in size/length. I want the parent div to grow depending on the content but only up to a certain height. If there is an image I want the image to grow or shrink to make the parent div reach the max height. If there is no image, I want the parent div to shrink to contain the text. The image will be added via JavaScript. I have illustrated what I wanted to do in the following picture.
I was expecting the following code to work but the images seem to expand to be larger than the parent div. I have tried a few other things but I cannot seem to get it to work.
Here is a codepen.
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img src="MayOrMayNotContainImg.com">
</div>
</div>
#parent{
max-height:400px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
Any help would be highly appreciated, thanks in advance.
In the snippet below, if the image is there, I am assigning its height dynamically using jQuery height by calculating the remaining space inside the #parent. (200 - height). So whatever the content may be, the height of the image will increase or reduce based on that.
$(document).ready(function() {
$('#img-wrapper').attr('src', 'https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg');
let height = $('#text-body').outerHeight();
$('#img-wrapper').height(200 - height - 20);
})
#parent{
max-height:200px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img id='img-wrapper' src="MayOrMayNotContainImg.com">
</div>
</div>
So I've two divs positioned next to each other via float left for the left div and float right for the right div. I want my p to appear underneath these two divs. However it just refuses to do that. It always appears at the top of the page or between the two divs. I've already tried setting the two divs to display inline block but then they don't stay next to each other and do a line-break instead. I'm relatively new to HTML and CSS so maybe its just a simple beginners fault but I would be gratefull if someone could help me out.
.p {
background: red;
width: 100%;
}
.tippsboxright {
color: rgb(238, 238, 238);
max-width: 45%;
margin: 0 0 0 5%;
float: right;
font-size: 1.7vw;
padding: 0;
}
.boxleft {
max-width: 50%;
}
<main>
<header>
<h1>My header</h1>
</header>
<div class="content">
<div class="boxleft">
<img src="../images/questionguy.png" alt="Typ mit fragen" class="imgkauftipps">
</div>
<div class="tippsboxright">
<p>
This is the right box with text inside of it.
</p>
</div>
<p class="p">This is the p tag that I want to be at the bottom of the page.</p>
</div>
</main>
You'll want to use CSS flexbox for this instead of float. Put the top divs in a wrapper/container and give the wrapper display: flex. That's basically it, but you can finesse it as I've done in this example:
.wrap {
display: flex;
justify-content: space-between;
}
.wrap div {
width: 100%;
outline: 1px solid red;
}
<div class="wrap">
<div>left</div>
<div>right</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Me non paenitet nullum festiviorem excogitasse ad hoc. Quis aute iure reprehenderit in voluptate velit esse. Quam temere in vitiis, legem sancimus haerentia. Inmensae subtilitatis, obscuris et malesuada fames. Fictum, deserunt mollit anim laborum astutumque!</p>
Or, using the html from your example, except I've moved the <p> tag out of the wrapper. Does the <p> have to be in the wrapper div?
.content {
display: flex;
}
<main>
<header>
<h1>My header</h1>
</header>
<div class="content">
<div class="boxleft">
<img src="../images/questionguy.png" alt="Typ mit fragen" class="imgkauftipps">
</div>
<div class="tippsboxright">
<p>
This is the right box with text inside of it.
</p>
</div>
</div>
<p class="p">This is the p tag that I want to be at the bottom of the page.</p>
</main>
There are several ways to get this type of layout, and while floating is the oldest and most common, it's not really designed for this type of thing. float is designed for text to flow around the block, like you see in magazines. So that's what you see happening: your text is flowing around the floats. There is a way to stop this though: clear. Clear tells text to not flow around left, right, or both floated objects. So you can use that to get the layout you desire:
.p {
background: red;
width: 100%;
clear: both;
}
.tippsboxright {
background: lightyellow;
color: rgb(238, 238, 238);
max-width: 45%;
margin: 0 0 0 5%;
float: right;
font-size: 1.7vw;
padding: 0;
}
.boxleft {
background: lightblue;
max-width: 50%;
float: left;
}
<main>
<header>
<h1>My header</h1>
</header>
<div class="content">
<div class="boxleft">
<img src="../images/questionguy.png" alt="Typ mit fragen" class="imgkauftipps">
</div>
<div class="tippsboxright">
<p>
This is the right box with text inside of it.
</p>
</div>
<p class="p">This is the p tag that I want to be at the bottom of the page.</p>
</div>
</main>
It is however better and easier to use either flex box or grid layouts in this case. They are designed for block style layouts, which seems to be what you want, not flowing text around blocks.
I need an example html/css which gives the following result
23:59 icon Some text which can wrap
like this
icon Some text which can wrap
like this
So there are 2 lines. The first line leads with a time. The 2nd line is indented the same width so that the icons align. The icons are a little bigger then the text just to make things tricky. To the right of each icon is some text which can wrap aligned with itself.
Would really appreciate some ideas how to do this.
I am also looking for a suggestion how to connect the 2 icons with a vertical line so that if the icons were circles then the whole thing would appear as a vertical barbell. But this is maybe too much bother
Keep things in their respected div and float them where you'd like.
.wrapper {
float: left;
}
div {
padding-right: 5px;
}
span {
float: right;
padding-left: 15px;
width: 180px;
}
<div class="wrapper">
<div>
23:59
</div>
</div>
<div class="wrapper">
<div>
icon
<span>Some text which can wrap like this</span>
</div>
<div class="wrapper">
icon
<span>Some text which can wrap like this</span>
</div>
</div>
If I understand you right, I think everything should work with Flex-Box.
Maybe you look at css-ticks to get some inspiration.
This should work:
.flex-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
i {
font-size: 2rem
}
div {
padding: 6px
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="flex-row">
<div>12:30</div>
<div>
<i class="fas fa-check"></i>
</div>
<div>Lorem ipsum dolor set amet..</div>
</div>
<div class="flex-row">
<div>12:30</div>
<div>
<i class="fas fa-times"></i>
</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam..</div>
</div>
you can use table to easily achieve that layout.
To connect two icons by vertical line I would use pseudo selector.
/* Selects pseudo element :before on every second icon */
.icon:nth-child(even)::before {
content: '';
display: block;
width: 1px;
height: 20px;
background: #000;
position: relative;
top: -20px;
}
It will need some tweaks, but you've got the idea.
I have a simple page where the all the content (<h1>, <h2>, <p>, etc.) is contained within a <div>, in order to have the same width.
I like the way the body text looks and want to keep it that way, but I'd like to add a background image to the heading. It should start from the very top of the page (and window, in my case) and end at the baseline of the last line of the heading itself, while also extending in width from the left side of the window to its right. In the following image I illustrated the desired layout. Below it, I've drawn the html hierarchy that I've attempted.
In fact, I've already tried creating a child of <h1> with
width: 100vw;
position: relative;
left: 50%;
transform: translate(-50%);
but:
Since the page has z-index: -1;, for some weird bug I can't click on links with relative positioning
I'd prefer not to use vw unites because of browser support.
I still can't manage to extend the background to the top.
The font size of <h1> and its margins are defined in pixels, as you see, but the page still behaves dynamically because as I resize the window, the number of lines of <h1> increases.
HTML
<div class="page">
<h1>Heading</h1>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS
body {
height: 100%;
width: 100%;
margin:0px;
}
.page {
font-size: 20px;
width: 90%;
max-width: 70ch;
padding: 50px 5%;
margin: auto;
z-index: -1;
}
h1 {
font-size: 30px;
margin-top: 0;
margin-bottom: 10px;
}
h2 {
font-size: 22px;
margin-bottom: 26px;
}
p {margin-bottom: 24px;}
JS Fiddle
Two suggestions:
Separate the h1 and the rest of the body in two different divs. Apply the background to the first div.
<div class="background-here">
<div class="page">
<h1>Heading</h1>
</div>
</div>
<div class="page">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Or you could just apply the background to the body and use background-repeat: repeat-x or bakcground-size: cover. But it depends on how the image was designed.
I am having the following structure of the web page.
Part 1: Header, fixed height
Part 2: Content, variable height
Part 3: Footer, fixed height
And I want the following to be true:
1) If the content is smaller than screen_height - header_height - footer_height : The footer should stick to bottom of page, giving the content all the screen space between header and footer.
2) If the content is larger than screen_height - header_height - footer_height : the page will scroll and the footer will be on the bottom of the page. (This case is already achievable, it's how all normal pages look)
To achieve first, I did the following
HTML:
<div class="page-content" style="display: table;height: 100%;width: 100%;">
<div class="header-section" style="display: table-row;height: 10px;">
Content here
</div>
<div id="content-section" style="display: table-row;height: auto;">
Content here
</div>
<div id="footer-section" style="display: table-row;height: 230px;">
Content here
</div>
</div>
With this, the header row is spanning not 10px height but more. I want to confine the header row to just 10px height. Is this achievable with this table structure? And what about cross-browser compatibility?
Thanks.
To reduce header height, add line-height:10px also.
You can add Javascript to apply height .
Please check the fiddle - https://jsfiddle.net/afelixj/c8vq3Lbu/5/
Tables try their very best to display everything in them. So since the text "content here" is higher than 10px, the top row will expand to show it all.
Possible solutions are
Take the header out of the table and put it above. Ordinary blocks handle height in a more straightforward way.
html, body {
margin: 0;
height: 100%
}
<header class="header-section" style="height:10px; overflow:hidden">
Content here
</header>
<div class="page-content" style="display:table; height:calc(100% - 10px); width:100%;">
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
Put an extra div in the table cell in the header that you give the height. If a div in a table cell is 10px high, the cell won't have to expand, even if there is content overflowing.
html, body {
margin: 0;
height: 100%
}
<div class="page-content" style="display:table; height:100%; width:100%;">
<div class="header-section" style="display:table-row; height:10px; ">
<div style="display:table-cell;">
<div style="height:10px; overflow:hidden">
Content here
</div>
</div>
</div>
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
Or, if the problem is that the content is actually 10px high, but you have a few pixels extra below it in the cell, it's probably that the content is inline and leaves room for a descender. In that case, the solution is to give the content display:block or vertical-align:top styles.
html, body {
margin: 0;
height: 100%
}
<div class="page-content" style="display:table; height:100%; width:100%;">
<div class="header-section" style="display:table-row; height:10px; ">
<div style="display:table-cell;">
<img src="http://lorempixel.com/300/10" alt="" style="display:block"/>
</div>
</div>
<div id="content-section" style="display:table-row; height:auto;">
Content here
</div>
<div id="footer-section" style="display:table-row; height:230px;">
Content here
</div>
</div>
As for cross-browser compatibility, it's usually best to emulate a full table (with nested divs being table, table-row and table cell) because older browsers may have problems with content being put directly inside a table row.
You do not need a table layout for achieving this.
Just do a calc for the min-height on your main content div. That's it. Use the viewport relative unit to get the height of the viewport (screen) and subtract the fixed heights of your header and footer.
All you need is this:
.header { height: 1.5em; } /* Fixed height, any unit */
.footer { height: 200px; } /* Fixed height, any unit */
.main { min-height: calc(100vh - 1.5em - 200px); } /* Calculated min-height */
Fiddle: http://jsfiddle.net/abhitalks/jpunjng4/2/
Snippet:
(go full screen to see the effect)
* { box-sizing: border-box; padding: 0; margin: 0; }
.header { height: 1.5em; background-color: #eef; border-bottom: 1px solid #999; }
.footer { height: 200px; background-color: #efe; border-top: 1px solid #999; }
.header, .footer { overflow: hidden; padding: 4px; }
.main {
min-height: calc(100vh - 1.5em - 200px); padding: 4px;
background-color: #eee;
}
<div class="header">
Header
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>