I have the following html...
<div class="maincontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at metus nisi. Sed blandit, nunc eget ornare porta, lorem est cursus eros, in ultricies enim mi eget leo. Integer a odio at neque lobortis fermentum ac at purus. Vivamus faucibus nec tortor at sagittis. Nam lectus metus, scelerisque vehicula orci ac, lacinia elementum lorem. Nam efficitur mauris quis tortor efficitur, vitae viverra metus semper. Nunc id euismod purus.
<div class="container">
<div class="box1">
Box 1 Content
</div>
<div class="box2">
Box 2 Content
</div>
<div class="box3">
Box 3 Content
</div>
</div>
</div>
<footer>
This is the footer
</footer>
.container{position:relative;}
.box1{position:absolute;top:0;background:red;color:white;}
.box2{position:absolute;top:20px;background:green;color:white}
.box3{position:absolute;top:40px;background:blue;color:white;}
https://jsfiddle.net/25w7cxv1/
For some reason the footer isn't displaying correctly and is being overlapped by the rest of the content. What am I doing wrong?
By giving each .box a position:absolute, you are taking them OUT of the document flow and then positioning them absolutely compared to their positioned parent (or ancestor).
<footer> is still in the document flow, and so will appear directly after the text in .maincontent.
Here I have removed position:absolute so that the boxes remain inline within the document:
.container{position:relative;}
.box1{background:red;color:white;}
.box2{background:green;color:white}
.box3{background:blue;color:white;}
And here I have given the boxes a property of display: table so that they are only as wide as their contents:
.box1, .box2, .box3 {display: table;}
I think this does what you were trying to achieve.
Fiddle: https://jsfiddle.net/gmncpn82/
Related
Here's the basic html structure I'm using:
<main>
<article>
<header></header>
<div class="article-content"></div>
</article>
</main>
<aside>
<div class="aside-content"></div>
</aside>
By using Bootstrap 4 I'm positioning main section and aside element side by side:
<div class="row">
<div class="col-md-8">
<main>
<article>
<header></header>
<div class="article-content"></div>
</article>
</main>
</div>
<div class="col-md-4">
<aside>
<div class="aside-content"></div>
</aside>
</div>
</div>
Which gives me this:
However what I'd like to achieve is to make sidebar content start at the same point as article content, i.e. below the header portion, like this:
But I need to maintain the basic HTML structure that was in the beginning. The point is that aside element should remain outside of the main element, but it's content should start below header element (which is a child of main element).
It's fairly easy to achieve this with jQuery, by finding out calculated height of header and then set it as the top padding in aside.
Is it possible to achieve this with just CSS?
Can you modify the html so that the header sits on another row? If so you can add another row on top with just the header in it with a .col-md-8 so that is spreads as wide as the article content.
Here is a jsfiddle
<div class="row">
<div class="col-md-8">
<header><h1>Some long Header of an article</h1></header>
</div>
</div>
<div class="row">
<div class="col-md-8">
<main>
<article>
<div class="article-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu cursus lorem. Duis fermentum erat id ex porttitor, eget sollicitudin lorem blandit. Duis tellus leo, dictum a mauris sed, sollicitudin aliquam enim. Maecenas purus orci, luctus nec orci eu, tempor volutpat tellus. Aliquam pretium lorem justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sollicitudin nisi ipsum, quis dignissim turpis cursus at. Donec euismod egestas sapien, at dignissim urna eleifend fringilla. Nunc malesuada velit eu nunc faucibus fermentum. Vestibulum tempus in arcu vel posuere. Fusce efficitur pretium dolor, eu condimentum turpis. Nam gravida bibendum sapien nec hendrerit. Proin leo nulla, elementum ut augue sit amet, lobortis efficitur quam.</div>
</article>
</main>
</div>
<div class="col-md-4">
<aside>
<div class="aside-content"><h3>Sidebar</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</aside>
</div>
</div>
This question already has answers here:
css flexbox: same height for all elements?
(4 answers)
Closed 5 years ago.
How do I set two different divs in their own child parent elements to the same size in CSS? The problem is similar to setting two different divs in the same element, but I'm not sure how to extend it do a lower child element.
I've created a jsfiddle for it that shows the problem. I would like the green section to expand to be just as large as the red section (automagically).
I am currently using a display flex system, but I'm open to using display table if you have an idea using that.
"box1" should be as large as whatever "box2" is (height wise).
https://jsfiddle.net/421hh08e/1/
<div class="outsideflex">
<div class="leftbox">
<div class="box1">Label 1</div>
<div>Label 2</div>
<div>Label 3</div>
</div>
<div class="rightbox">
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet laoreet orci, vel vestibulum turpis gravida eget. Nam nibh enim, tristique sit amet lectus non, rhoncus tincidunt nibh. Etiam eu mi quis purus viverra mattis. Praesent malesuada, urna in vehicula tempor, lorem diam bibendum sapien, eget ornare elit diam nec ante. Proin et eros velit. Morbi congue leo et eros volutpat egestas. Proin laoreet varius luctus. Quisque quis tincidunt orci. Vestibulum lobortis congue porttitor.</div>
<div>Value 2</div>
<div>Value 3</div>
</div>
</div>
The example and "problem case" is that I need the text in one column to match the other. Think of it is a label on the left and value on the right. The data unfortunately doesn't provide me with good ids to match on so I have to rely on just listing out the arrays.
In short, I can't change the template much because each area is looped through separately.
This is NOT the same as the question posed css flexbox: same height for all elements? because the elements are child elements within two entirely separate elements, not child elements of a single div.
how are you?
My suggestion is to work with a grid system.
I made a quick example to explain better, I would like you to tell me what you think of this suggestion.
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
}
.bg-primary {background-color: green;}
.bg-secondary {background-color: red;}
<div class="row">
<div class="col bg-primary">
Label 1
</div>
<div class="col bg-secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet laoreet orci, vel vestibulum turpis gravida eget. Nam nibh enim, tristique sit amet lectus non, rhoncus tincidunt nibh. Etiam eu mi quis purus viverra mattis. Praesent malesuada, urna in vehicula tempor, lorem diam bibendum sapien, eget ornare elit diam nec ante. Proin et eros velit. Morbi congue leo et eros volutpat egestas. Proin laoreet varius luctus. Quisque quis tincidunt orci. Vestibulum lobortis congue porttitor.
</div>
</div>
<div class="row">
<div class="col">Label 2</div>
<div class="col">Value 2</div>
</div>
<div class="row">
<div class="col">Label 3</div>
<div class="col">Value 3</div>
</div>
[exemple grid system][1]
[1]: http://codepen.io/CesarCEARA/pen/dvNvXP
http://codepen.io/CesarCEARA/pen/dvNvXP
Regards,
Cesar Barros
I have an index that link to sections throughout the page but for some reason all of them will only take me to the top of container that contains the sections. See the code below (all of the sections are made up of the same section code (minus section container) listed below but with different schools):
<!-- Outter container -->
<div class="container chapter">
<!--Section Index-->
<div class="container chapters-index">
School |
</div>
<!-- Section container (this is where the anchors link to)-->
<div class="container chapters">
<!-- Section to be linked to -->
<div id="school-id">
<div class="col-md-5 chapters">
<img src="images/chapters/school-logo.jpg" class="school responsive">
<h6>Meets weekly on Wednesday after school, <strong>3:30pm-6pm</strong>.</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod suscipit gravida. Donec non magna pretium, commodo nisl nec, sollicitudin enim. Phasellus lobortis lectus a urna auctor maximus. Donec nibh metus, finibus et rhoncus ut,
aliquam sit amet mauris. Sed odio libero, pretium nec placerat ac, commodo quis mi. Integer aliquam mauris lacus, at finibus nibh fringilla id. Ut congue sit amet tortor nec laoreet. Duis posuere finibus nisi, sed fermentum sapien. Curabitur
porta interdum elit, nec ultrices neque aliquet at. Vivamus eleifend est sit amet hendrerit vehicula. Nulla malesuada metus eget luctus consequat.</p>
</div>
</div>
</div>
</div>
I've been trying to figure out the issue all night! Am I missing something here? Why are my links not going to their appointed anchors?
Seems to work okay for me in the JSFiddle you linked.
My diagram below shows the boundaries of the school-id div, is this correct? The image is part of the school div, and not the categories at the top?
The image is appearing at the top of the anchor, which I believe is correct?
http://jsfiddle.net/tze3uhrL/1/
I have an image, that I want to be aligned to one side of a div. I also have paragraphs that need to go alongside this image. However, they do not have enough text content to reach all the way down the height of the image. The content beneath the paragraphs I have needs to be below the image.
Using float:left for the image does not work, since the container div for the image with the desired alongside paragraphs does not respond to the height of floated elements.
Using position:relative; left:0px for the image also does not work. With this, I have tinkered with the display of the paragraphs, but they always go beneath the image instead of beside.
h3 {text-align:center}
img {position:relative;left:0px}
p {display:inline-block;}
<body>
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png"/>
<p>This paragraph should be next to the image.</p>
<p>This paragraph should also be next to the image.</p>
</div>
<div>
<h3>Another Header</h3>
<p>Everything from the above header and down should appear below the image.</p>
</div>
</div>
</body>
Here is the Fiddle.
EDIT
After reviewing these answers, I found a more elegant solution:
h3 {clear:both; text-align:center}
img {float:left; margin-right:10px}
This takes the idea of clear fix and makes it more readily-applicable.
Remove inline-block (so they default to block) from your p tags and then put your float:left; back in to your img tags. Also add float:left; and clear:left to the div tag so they always flow under one another.
https://jsfiddle.net/bowp6aea/3/
div {float:left;clear:left;}
h3 {text-align:center}
img {float:left;}
<body>
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>
<p>
Vivamus auctor tortor sit amet ipsum volutpat, eu malesuada lorem euismod. Duis nec placerat nibh, vehicula gravida purus. Cras facilisis dictum elit vel gravida. Phasellus egestas eu mi nec cursus. Integer eget dui nibh. Nunc porta in tortor quis ullamcorper. Nulla tristique imperdiet ligula, vel dictum risus scelerisque sit amet. Phasellus elit metus, gravida vitae risus ut, faucibus vulputate mauris. Praesent eget magna sit amet sem bibendum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, ante sit amet elementum auctor, nulla mi iaculis tellus, et mattis nisi purus vitae sem. Vestibulum sit amet quam eget arcu congue commodo sit amet sit amet dui.
</p>
</div>
<div>
<h3>Another Header</h3>
<p>
Phasellus tincidunt enim ex, a dapibus nunc ultricies vitae. Integer interdum enim quis elit gravida auctor. Etiam non ullamcorper orci, eget luctus eros. Quisque posuere neque pretium urna accumsan, ac pellentesque erat dignissim. Maecenas at mi sapien. Proin lacus mauris, imperdiet bibendum orci sed, placerat ornare ipsum. Vivamus luctus quam id orci scelerisque, sed lobortis tellus finibus. Nam et eros sed arcu tristique tempus.
</p>
</div>
</div>
</body>
Updated the HTML as for in the demo, and apply these CSS class:
h3 {text-align:center; clear:both;}
img {float:left}
.inner-wrap p {display:inline;}
what about using the attribute clear:both ? you just need to insert a simple <div class="clear"></div> and give it clear:both in CSS
.clear {
clear: both
}
h3 {
text-align: center
}
img {
float: left;
margin-right: 10px /*demo */
}
<div>
<div>
<h3>Header Here</h3>
<img src="http://www.devtano.com/software/eco/images/console.png" />
<p>This paragraph should be next to the image.</p>
<p>This paragraph should also be next to the image.</p>
<div class="clear"></div>
</div>
<div>
<h3>Another Header</h3>
<p>Everything from the above header and down should appear below the image.</p>
</div>
</div>
For simple image alignment with floating text you can use align="left within the image.
<p>
<img align="left" src="http://www.devtano.com/software/eco/images/console.png"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat nibh ac vehicula rhoncus. Etiam hendrerit ipsum at congue pulvinar. Suspendisse vehicula metus eu nulla malesuada pulvinar. In interdum sem sed dapibus finibus.</p>
Fiddle here.
Try using on the container div:
display: inline-block;
Or you can float all the elements to the left:
float: left;
I want to display a html page, with a classic design. Header, footer, content and bar to the right.
For some reason I don't like the fixed width of the content. On a wide screen you should be able to resize your page, so it fills the screen, or make it very small to display two pages side by side.
I also would like to use div tags instead of a table layout. Using the div tags gives me the following advantages (I'm being told):
Content can be rendered while waiting for the "right" bar
On a mobile phone, the Div tags can be shown under each other, instead of side by side.
My test/debug html looks like this:
<!-- Create content with DIV tags -->
<div id="head" style="background-color:aqua">This is the header</div>
<div id="body" style="float:left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</div>
<div id="right" style="background-color:orange; float:right; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tail" style="background-color:lime;clear:both;">This is the Footer</div>
<p> </p>
<!-- Create content with TABLE tag -->
<div id="t-head" style="background-color:aqua">This is the header</div>
<table cellpadding="0" cellspacing="0">
<tr><td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</td><td valign="top" style="background-color:orange; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td></tr>
</table>
<div id="t-tail" style="background-color:lime;clear:both;">This is the Footer</div>
Output of this code is here:
(source: vantslot.be)
(Text does not matter, only the layout, so I have shrunken it a bit).
The top layout is using the divs : wrong
Bottom layout is using the table : good
My question / problem
How can I position the "right" bar, on the right of the content, while maintaining the dynamic width of the content, and not using table layout?
What I actually want is the right pane appear on the right of the content, but when the browser is too small (< 20em), it can be displayed under it. This is not possible with tables, so I prefer a div solution.
In the final Website the contents of the header / footer / content and right will be dynamically generated, so I cannot hardcode the height.
Edit
Thx for all the answers, this really helps me forward.
I see what is "wrong" here. I have put the right pane after the content pane. If I put the right pane before the content pane, it renders correctly (after adding a margin-right to the content).
This is a bit illogical for flow of the html. Since the content is more important as the content in the right pane, I would like it to be send to the client before the right pane.
This will allow your right, fixed-width column to fit in the margin of your other column, and therefore be on the same line:
#right
{
float:right;
width:18em;
}
#body
{
margin-right: 20em; //IE calculates padding into the width, so you need a buffer unless you set body's padding to 0
}
Now the body's div, which defaults to 100% screen width, will be fluid, and your right column will be fixed width.
Add a clear:both to your right column. To manage the height of having a float at the bottom of your main content area use a clearfix. Also, since you want the right column to float underneath the left column, there's no need to float the left column?
Try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Пример</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#header{
height:150px;
min-width:600px;
background:#FFEF97
}
#menu{
width:250px;
float:right;
background:#FFC597
}
#info{
min-width:350px;
background: red;
}
#footer{
height:20px;
min-width:600px;
background:#B9CC8A;
clear:both
}
#body{
width: expression(((document.documentElement.clientWidth
|| document.body.clientWidth) < 600)?
"600px" : "100%")
}
</style>
</head>
<body>
<div id="body">
<div id="header">HEADER</div>
<div id="menu">MENU (side bar)</div>
<div id="info">INFO (central pane)</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Not tested (yet), but I think I have found the solution to the problem.
http://www.alistapart.com/articles/holygrail/
This solutions allows to mix fixed and liquid layout (terms I learned from asking this question).
Try the following CSS snippet:
display: table;