What I would like to reach is the following design:
Two text blocks with some gaps inbetween aligned around the page midline (see the picture).
I tried to play around with float property, using margin and padding to get the gap, but I can't get them centered.
EDIT:
I forgot to indicate that the arrows show the resizable parts: so, the page width must be resizeable whereas the text itself isn't, but the text is dynamic content and can change from page to page, so there is no way to just define constant width for it in pixels.
You could do it like this
<div id="wrapper"> <!-- wrapper will be in the middle of the page -->
<div id="box1"></div> <!-- Your First Box -->
<div id="box2"></div> <!-- Second Box -->
</div>
#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */
Use display: table with margin: 0 auto for centered block and display: table-cell with percentage padding for its children. Set percentage width for centered block if needed.
Something like this?
HTML:
<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus.
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
</div>
</body>
</html>
CSS:
body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}
For the left block, set the left margin to auto. For the right block, set the right. Like this:
#leftBlock {
margin-left: auto;
}
#rightBlock {
margin-right: auto;
}
This puts them back to back in the center of the screen.
To add space in between the blocks, set the other margin to some defined amount:
#leftBlock {
margin-left: auto;
margin-right: 5%;
}
#rightBlock {
margin-right: auto;
margin-left: 5%;
}
Related
Totally new to HTML/CSS. I've got the top image/logo done, and the header. How do i get that text formatted like in the picture (3 columns)?
I only tried using table with 3 columns. However i think its harder to style it considering its a table. Like max column width/height etc.
Thanks in advance!
Click for the image
perhaps the easiest way to do this is with the css columns attribute:
div{
column-count:3;
column-gap:100px;
}
<div>this is some random text we want to enter into our html page
</div>
but the better way to do this is with flex
#container{
display:flex;
justify-content:space-between;
}
<div id = 'container'>
<div class='cols'>this is some text</div>
<div class='cols'>we want to add</div>
<div class='cols'>to our html page</div>
</div>
if you want to add a header and a footer you can try:
#container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#cols{
display:flex;
justify-content:space-between;
width:100%;
}
<div id='container'>
<div id = "header">my Header</div>
<div id='cols'>
<div>some random</div>
<div> we want to add</div>
<div>to out html page</div>
</div>
<div id ='footer'>my Footer</div>
</div>
For the three text sections, you need three child divisions in one parent division.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
Style it this way:
.parent{
display: block;
width: 100%;
margin: 0px auto;
text-align: center;
}
.child{
display: inline-block;
width: 30%;
height: auto;
margin: 0px auto;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#media only screen and (max-width: 768px) {
.child{
width: 100%;
}
}
The media query is there to make the divisions stack on one another on mobile screens.
Simply input this style
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
And put this code below your image code,
<div class="column">
<p>It occurs in a wide range in sub-Saharan Africa</p>
</div>
<div class="column">
<p>The Indian subcontinent to Southeast and East Asia..</p>
</div>
<div class="column">
<p>The leopard is one of the five extant </p>
</div>
I would suggest that you stay semantically correct and not use DIV tags for everything under the sun. The text in question is paragraph text thus deserves to be in a P tag.
This works for the three-column part of your question. It has the advantage of being correct semantic use of HTML tags, and using CSS to produce table-like formatting without needing to commit the sin of actually using a table like we used to do back in the 90s.
Edit: one other note. You will find that the CSS float property has its uses. However, as you use it, you will also find that overuse of it can complicate the heck out of your layout and cause you to starting pulling hair out in the end. The display table type properties are what I prefer after some years of front end work in my not-so-distant past.
<html>
<head>
<style type="text/css">
.row {
display: table-row;
}
.cell{
display: table-cell;
vertical-align: top;
width: 33.33%;
}
</style>
</head>
<body>
<div class="row">
<p class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus blandit neque dapibus volutpat. Donec et dapibus leo. Ut at sodales magna, quis varius lacus. Ut sapien enim, fermentum eu egestas sed, pretium vel dolor. Nullam congue odio ut sem volutpat, ac dictum mi mattis. Quisque in purus sollicitudin nisl dapibus bibendum a a quam. Sed tristique augue nisi, quis interdum odio aliquet in. Aliquam tristique, dolor sed suscipit lobortis, eros enim mattis purus, vitae consectetur ante est nec libero. Aenean semper, ipsum eget venenatis eleifend, erat erat dignissim mi, non lacinia justo lorem at tortor. Aenean et erat suscipit velit porta placerat nec sit amet augue. Nulla non sem non tellus pellentesque ornare. Vivamus volutpat eget lacus eu dignissim. Sed venenatis euismod tempus. </p>
<p class="cell">Integer euismod felis et elit dapibus laoreet. Pellentesque et massa vitae orci pharetra imperdiet. Proin ultricies velit erat, a semper arcu volutpat eu. Morbi feugiat sapien non nisi faucibus elementum. Curabitur sed justo et enim maximus tempus. Donec posuere gravida justo sit amet dignissim. Etiam vestibulum mauris eros, vitae blandit justo pellentesque nec. Ut varius mattis volutpat. </p>
<p class="cell">Nulla vulputate ipsum leo, ut ornare massa malesuada et. Donec metus enim, viverra id diam a, luctus sagittis turpis. Etiam euismod, ex id convallis tristique, odio tellus placerat nunc, in dapibus risus massa non nulla. In placerat lectus tortor, vel gravida leo pharetra eget. Donec mollis facilisis pharetra. Nulla commodo quam tellus, eget hendrerit nisi aliquet id. Duis sagittis enim eu sodales bibendum. Maecenas tincidunt id mauris vitae ultricies. </pclass="inline">
</div>
</body>
</html>
I have a fixed top div with variable height. All I need is to push the bottom contents below the fixed div to re-position itself as the height of the fixed div changes in various pages.
P.S. I'm currently doing it with jquery but it takes some rendering time and shows broken contents until the page loads completely as it is added at the end of body tag. I want to load jquery and other scripts at the very end so trying to find a way to do this completely with CSS if possible for getting rid of those rendering effects.
Following is a demo code which needs to work with CSS only -
.container {
width: 100%;
height: auto;
}
.top {
position: fixed;
height: auto;
width: 100%;
background-color: black;
color: white;
top: 0;
}
.bottom {
height: auto;
width: 100%;
}
<div class="container">
<div class="top">
This is a fixed div with variable height and the bottom content are supposed to pushed and stayed below as the height increases.
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur porttitor neque at vestibulum. Nulla facilisi. Nullam tempus ligula sapien, dictum scelerisque libero tristique et. Ut sit amet magna eros. Suspendisse potenti. Donec vitae sodales nunc. Nunc eget condimentum urna. Nulla sit amet lectus ac nunc mattis porttitor eget quis purus. Ut rhoncus nulla eget velit tincidunt luctus. Donec in justo tempus, porttitor magna nec, semper eros. In bibendum magna eget lectus viverra ultricies. Integer pharetra augue lorem, eu tempus nulla volutpat dignissim.
Morbi vulputate arcu sit amet lectus porttitor hendrerit. Donec id pharetra urna, sit amet tincidunt nulla. Nam semper felis vitae odio elementum posuere. Vivamus blandit accumsan sapien, vitae blandit est lacinia et. Nam sit amet diam massa. Quisque et erat et orci dignissim congue. Maecenas pellentesque pretium sodales. Donec pellentesque rhoncus tortor et hendrerit. Phasellus nec dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce nec ligula mollis, iaculis est a, lobortis est. Phasellus faucibus varius arcu, eget volutpat quam venenatis vel. Sed felis nulla, pulvinar ut metus ac, luctus finibus tortor. Aliquam vulputate, nulla quis accumsan pretium, lacus elit sollicitudin ipsum, non faucibus erat mauris a felis.
</div>
</div>
try this
.bottom {
height: auto;
width: 100%;
margin-top: 1cm;
}
I have updated the fiddle and its working:https://jsfiddle.net/m0615z32/1/
Below is a pure javascript code that will work for you. Please check
What i have done is set the padding-top of below container to be equal to height of top container without using jquery.
document.getElementById("bottom-div").style.paddingTop = document.getElementById("top-div").clientHeight+"px";
OR
If You can change your top container to be relative than fixed, then also this works but is not keeping the div fixed on top
.top {
position: relative;
height: auto;
width: 100%;
background-color: black;
color: white;
top: 0;
}
Now the top content will always be on top. It will adjust according to content and below container will start after top ends.
In html \ css, I've got a div element that can appear at different y positions of a page (conditional to the populated html above it). Problem occurs when content of the div rendered is too tall. In that case I'd like the div to expand to at most the page's height (e.g. based on screen resolution) and add a scrollbar to match its content.
Is there any pure html \ css solution for this, without using js?
Attached is an example of the div structure. Notice that I'd like to have a scroll inside the big blue div, without tying to a specific height, as I do not know in advance what are the given sizes (they're dynamic).
http://jsbin.com/jaboxoneju/edit?html,output
Here is a flexbox layout that causes the second div to scroll when its height would exceed the height of the window.
Live Demo:
html, body {
margin: 0;
padding: 0;
}
html, body, #container {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
#upper {
background-color: red;
}
#scrolling {
background-color: blue;
flex-grow: 1;
overflow: auto;
}
<div id="container">
<div id="upper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie.</p></div>
<div id="scrolling"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie. Quisque pretium arcu non magna pretium, nec fringilla augue pretium. Etiam a tellus ipsum. Curabitur ultrices vel nibh sit amet feugiat. Etiam consequat id ligula eget suscipit. Vestibulum sagittis tincidunt quam porta eleifend. Suspendisse interdum metus et tellus maximus dapibus. Phasellus vel bibendum leo, eu faucibus nisi. Sed vestibulum interdum arcu, et sodales diam cursus vel. Aliquam tristique lorem posuere tortor aliquet, sit amet pharetra lectus tristique. Maecenas consectetur laoreet tellus. Proin interdum tincidunt ex non commodo. Morbi non tristique orci, vel porta ligula. Duis sollicitudin in elit eu laoreet.</p>
<p>Sed volutpat vel tortor id placerat. In nisl odio, ornare at enim sit amet, mollis ultricies libero. Mauris et auctor lorem, in maximus felis. Fusce elementum nisi odio, sed venenatis enim convallis euismod. Sed sed pharetra ligula. Donec venenatis imperdiet turpis, vitae vehicula leo luctus a. Cras ultrices rutrum aliquet. Proin scelerisque nisl vitae posuere consectetur. Sed viverra rutrum nulla ut accumsan. Curabitur posuere consectetur nulla nec cursus. Donec id massa odio.</p></div>
</div>
JSFiddle Version: https://jsfiddle.net/9gtLughL/
<div style="overflow:Auto;">
<h2>my code</h2>
</div>
use this code at the start of the div
You can do this using a table structure.
HTML:
<div class="container table">
<div class="table-row">
Top Content
</div>
<div class="table-row height-100">
<div class="table-cell">
<div class="height-100">
<div class="scroll">
Bottom scrollable content with 100% remaining height
</div>
</div>
</div>
</div>
</div>
CSS:
.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }
The 100vh attributes makes the body tag to have 100% of view height(screen height).
In a table structure, the div with class table-row will get height as much as needed by children, but if it also has height-100 will get 100% of what the other rows do not occupy. Inside it I did a few ugly twitches to get the overflow running on a dynamic height table-cell,
Demo: http://jsfiddle.net/alexix/70vf92e3/2/
I want images with class wide to go over the parent div's padding. When I give them negative margin to do it, they don't stretch to full width (max-width:100% keeps them the same size).
#content {
padding: 20px;
border: 1px solid red;
}
/* regular images */
#content img {
max-width: 100%;
}
/* full width images, videos etc */
#content .wide {
margin-left: -20px;
margin-right: -20px;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
sed eu sapien.</p>
<!-- this should stretch -->
<img class="wide" src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>
<!-- this one should NOT -->
<img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit, s</p>
</div>
How can I achieve it? I want the image to be left to right without no spaces on sides.
Images without the class wide should be contained inside the paddings as normal.
(ps. giving margin to everything but the images will work, but it's a lot of work and not very elegant)
I'd suggest adding markup as isherwoord suggested, which would allow for better browser support than my answer. If that is not possible, you can use the calc function to add the negative margins to the 100% width. Browser support isn't even that bad!
#content {
padding: 20px;
border: 1px solid red;
}
/* regular images */
#content img {
max-width: 100%;
}
/* full width images, videos etc */
#content .wide {
margin-left: -20px;
margin-right: -20px;
max-width: calc(100% + 40px);
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
sed eu sapien.</p>
<!-- this should stretch -->
<img class="wide" src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>
<!-- this one should NOT -->
<img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit, s</p>
</div>
Instead of stretching the image with negative margins, add a container element:
#content {
padding: 20px;
border: 1px solid red;
}
/* regular images */
#content img {
max-width: 100%;
}
/* full width images, videos etc */
#content .wide {
margin-left: -20px;
margin-right: -20px;
}
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet non libero eget ornare. Proin commodo tortor risus, vitae malesuada lectus pharetra quis. Aliquam quis elit in erat facilisis pellentesque. Donec ornare ligula eu massa dignissim posuere
sed eu sapien.</p>
<!-- this should stretch -->
<div class="wide">
<img src="http://pic.templetons.com/brad/pano/europe/epidaurus-wide.jpg">
</div>
<p>orci. Proin nec nunc pulvinar, feugiat lorem in, imperdiet ante. Proin interdum quam id congue tincidunt. Praesent pellentesque facilisis dictum. Nulla vel nulla turpis. Fusce mauris elit</p>
</div>
I have a bit of a problem placing a footer. It's supposed to float above 2 side by side columns (http://imgur.com/dfiT1). Now the problem is, it needs to be aligned well so that the border of the 2 columns is aligned with the border of the 2 parts of the footer, AND, it needs to have a minimum margin of say 100px on both columns, so that the footer doesn't float above the content of either of the columns when a page has very little or a lot of content.
I've tried resolving this with a coworker by using an extra wrapper, a clearfix, jquery for height adjustment but we can't seem to find a solution.
so in short: Footer needs to stick to the same position in big and small resolutions, minimal margin-top on both columns
Try do add min-height: 100%; to both columns, and put them in the same div.
The best solution, in my opinion, would be to place the footer outside of the two columns. But I know that sometimes there are constraints that you can't change, so a possible solution would be:
HTML
<div class="wrapper"><div id="column1" class="column">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl purus, lobortis et adipiscing non, vestibulum et tortor. Praesent aliquam placerat enim sit amet blandit. In ipsum dui, accumsan at hendrerit nec, tempus in augue. Etiam molestie, orci a feugiat tempus, nunc quam posuere libero, et ultrices libero sem porta arcu. Donec varius, massa at feugiat accumsan, mi lacus aliquam arcu, id faucibus arcu felis et sapien. Praesent sit amet tortor nibh. Nam mollis, ante quis iaculis fringilla, ante sapien dignissim ligula, in dignissim urna nisl ut ante. Mauris eget diam justo, nec tempor justo. Donec vel eros eget risus rhoncus dapibus. Nullam at felis faucibus orci molestie feugiat sit amet ut augue. Vestibulum at tellus tortor, non tempus quam. Phasellus adipiscing ante a purus congue ultrices in non justo. Ut ullamcorper porttitor quam, sit amet tincidunt mauris hendrerit at.
</div>
<div class="footer">
Donec facilisis accumsan nisl
</div>
</div><div id="column2" class="column">
<div class="content">
Aenean pharetra sagittis ipsum, vitae pulvinar nunc aliquet ut. Fusce sit amet elit dui, a vulputate risus. Maecenas in laoreet tortor.
</div>
<div class="footer">
Pellentesque malesuada ligula eget justo
</div>
</div>
</div>
CSS
html, body, .wrapper {
margin:0;
border:0;
outline:0;
}
.column {
display:inline-block;
margin:0;
padding:0;
vertical-align:top;
}
#column1 {
width: 30%;
background-color:teal;
}
#column2{
width: 70%;
background-color:coral;
}
.wrapper{
position: relative;
background-color: black;
padding-bottom: 200px;
}
.footer {
position: absolute;
bottom: 50px;
background-color: silver;
}
#column1 .footer {
right: 70%;
}
#column2 .footer {
left: 30%;
}
live demo
There would be other solutions, but this one seems the easiest to me, as lond as the footer's height is constant.