I need to implement a responsive table design that works in as many browsers as possible. The two left most cells (left/mid) will have static width while I need the right div to have a dynamic width based on the size of the current window.
This is how the markup looks like :
<div class="wrapper">
<div class="leftWrapper">
<div class="left">left</div>
<div class="mid">mid</div>
</div>
<div class="right">Lorem ipsum dolor sit amet, facilisi velit justo non. Pretium vestibulum nibh nonummy et a libero. Aptent consequat suscipit ridiculus leo pellentesque tempus, suspendisse pretium quis turpis. Euismod facilisi congue ab. Pretium ultricies non aliquam mi, cras sint, pede elit ligula aliquam in scelerisque ultricies, vitae dictum tincidunt sit, torquent eu et eros suspendisse. Voluptate nec curabitur et at nam non, diam vel, lorem nibh id condimentum a, laborum ornare, pede sem mattis. Numquam magna non metus sit fringilla, ligula quis cras, in lorem, praesent eros volutpat nisl vehicula tellus, egestas nullam. Pede aliquam donec.</div>
</div>
http://jsfiddle.net/mmZeN/.
How do I let right cell stay on the same line as the left and mid cell without using display: table-cell and at the same time litting it resize based on the width of the bowser?
I've made this from complete scratch, see if it's useful to you
Demo
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.left {
float: left;
width: 200px;
background-color:#0f0;
min-height: 200px;
}
.center {
float: left;
width: 120px;
background-color:#000;
min-height: 200px;
}
.right {
height: 200px;
background-color: #f0f;
margin-left: 320px;
}
</style>
Do not float the .right element and give it a margin the same width as the .leftWrapper
That is the beauty of the floats..
updated demo at http://jsfiddle.net/mmZeN/2/
If you have static values for left and middle one, you may specify using css and let other column to be percentage value. This should work in this case.
Updated: Get the px with of current placeholder(may be a DIV), deduct left and middle column width, then remain width ex: Xpx
Xpx/total width of container x 100
this value you may give as percentage.
Related
I am trying to create a background that auto adjusts in height as I add content.
If there is no content, the background should cover the entire screen, 100vh. As I add content the background should adjust in height until it reaches its minimum height of 100px. I have included an image to show demo what I am trying to achieve.
I have tried using min/max/100%/auto height properties and cant seem to find a solution.
I am using vue 3, typescript and css in my project.
Can someone please help me?
Using flexbox would give you exactly what you are asking for. In a nut shell what is happening is the parent container is using display flex which causes the children use flexbox properties. The .background div then has flex-grow : 1 which pretty much says grow as much as you can to fill the container. That means it will grow to fill the left over space of the parent depending on how much text there is.
.flex-container {
display: flex;
height: 100vh;
flex-direction: column;
}
.background {
background-color: blue;
flex-grow: 1;
}
<div class="flex-container">
<div class="background">
<h1>my background div</h1>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
finibus, odio vel scelerisque convallis, leo odio scelerisque urna, ut
scelerisque elit urna id quam. Etiam tempus pretium erat a semper.
Mauris consequat scelerisque ante id volutpat. Suspendisse convallis,
ipsum ut vehicula vehicula, lorem mauris porttitor enim, sollicitudin
ultrices lectus sem et ipsum. Morbi feugiat, lorem at viverra mattis,
neque enim vehicula turpis, blandit luctus eros eros ut arcu. Praesent
facilisis pharetra consectetur. Maecenas sagittis commodo felis, vitae
tristique risus. Phasellus fermentum varius turpis vel rhoncus. Nullam
aliquet nec risus non interdum. Sed nec magna pellentesque, facilisis
felis ac, cursus leo. Fusce et tortor magna. Fusce odio eros, varius non
placerat mattis, ullamcorper sed purus.
</div>
</div>
You can use your text container to hide the background underneath.
.container {
border: solid 1px grey;
background-color: red;
position: relative;
height: 250px;
}
.text {
position: absolute;
bottom: 0;
background-color: white;
width: 100%;
}
<div class="container">
<div class="text">
<p>Here is some text <br /> on multiple <br /> lines.</p>
</div>
</div>
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>
Hi all been searching hard but found various answers that doesn't seem to resolve my issue.
I have one div box that needs to be vertically align centered to the div box next to it matching its height which is not defined as the content will change
But i need the content in the left box to be centered no matter what the height of the div box next to it.
any help would be appreciated.
Thanks
<div class="container">
<div class="leftCol">
Content or image in here needs to be vertical center based on div next to it height <
/div>
<div class="rightCol">
Content here
</div>
</div>
Here is an example using CSS tables.
.table-panel {
display: table;
}
.table-panel div {
display: table-cell;
vertical-align: middle;
border: 1px dotted gray;
}
<div class="table-panel">
<div>Left panel</div>
<div>Right panel: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar risus. Vestibulum imperdiet velit nisi, eget ullamcorper urna rutrum vel. Aliquam tristique elit augue, nec lobortis eros pretium quis. Proin ac quam pretium,
fringilla est et, sodales erat. Cras quis odio est. Integer ornare, neque in efficitur ultricies, justo magna ornare enim, quis dictum enim ipsum vel urna. Cras consectetur orci id quam cursus feugiat. Proin laoreet ullamcorper est vitae sagittis.
Aliquam faucibus elit sed sodales varius. Phasellus maximus turpis non nisl lobortis, sit amet efficitur lacus suscipit. Nunc a ligula a est feugiat mollis in a lacus.</div>
</div>
If I understand your question right what you are looking for is a wrapper around the two left- and right-boxes. Then inside the wrapper you want the two boxes to be inline-blocks and with vertical-align:middle perhaps?
See this Fiddle:
<div id="wrap">
<div class="left-box"></div>
<div class="right-box"></div>
</div>
#wrap{
width:250px;
height:auto;
background:#efefef;
}
.left-box{
display:inline-block;
width:100px;
height:150px;
background:#00ff00;
vertical-align:middle;
}
.right-box{
display:inline-block;
width:100px;
height:180px;
background:#ff0000;
vertical-align:middle;
}
http://jsfiddle.net/0kpdskf2/
Is this what you want?
I'm working on a template for WordPress and need to render images to the left and to the right side of the main content div.
I have a wrapping div of 100% width, so the images don't overflow the screen, then I have given the images position: absolute (relative to the content div), and a negative value (the width of the image) on the right/left parameters.
This works fine, and renders the images nicely to the left and right of the main content. But the problem is, these images need to change every once in a while, and the width of the images varies, so the left and right offsets are not correct anymore.
How can I render the images outside of the div, without knowing the width? I've tried Left/Right:-100%;, but that doesnt work.
The images are purely decorational, and dont have to be (fully) visible when the screen is too small.
Thanks for any help!
If you can't specify the width and want to display the image as is (not scaling it), you can float the images to the right and left and use overflow:hidden on the content
.left {
float: left;
margin-right: 20px;}
.content {
overflow:hidden;}
.right {
float: right;
margin-left: 20px;}
However, you will need to have the following struture in your html for the layout to render correcty:
.wrap > img + img + .content
http://jsfiddle.net/h6u65hp8/1/
How about something like this? http://jsfiddle.net/usL5vcqg/
<div id="wrap">
<div id="leftImage">
<img src="https://www.google.com.au/images/srpr/logo11w.png"/>
</div>
<div id="content">
text goes here
</div>
<div id="rightImage">
<img src="https://www.google.com.au/images/srpr/logo11w.png"/>
</div>
</div>
* {
margin:0;
padding:0;
}
#wrap {
width:100%;
}
#leftImage {
width:20%;
float:left;
}
#rightImage {
width:20%;
float:left;
}
#content {
width:60%;
float:left;
}
img {
width:100%;
}
The images will scale depending on the size of the screen and they will always sit on either side of the content.
I actually came up with something myself. The content div has a static width, so what I did was switch the left and right parameters around, and set it to the width of the content div (plus some padding).
<div class='prevent-overflow'>
<div class='content'>
<img src='http://placehold.it/200X200' class='left-side-image' />
<img src='http://placehold.it/200X200' class='right-side-image' />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at libero nec ex vestibulum luctus ut eget odio. Nunc mollis, nulla eget cursus porttitor, neque sem rhoncus est, vel consequat leo lacus at nisl. Nulla ac sem eget lorem malesuada malesuada. Fusce in erat tempus, elementum sem id, dapibus sapien. Vivamus vestibulum enim nulla, id porttitor odio condimentum ac. Pellentesque lacinia mollis elit tristique luctus. Vivamus luctus ultricies ullamcorper. Vivamus eros orci, luctus et pellentesque commodo, egestas et velit. Duis ante velit, feugiat sed gravida ac, tempus sed odio. Praesent tincidunt risus id ex placerat rhoncus. Maecenas sit amet pharetra neque. Aenean dapibus a velit quis ultricies. Quisque aliquam erat nec est rutrum, nec ornare urna ultrices. Quisque accumsan purus non ex sagittis, in facilisis massa facilisis. Vivamus fermentum libero dictum neque laoreet, sit amet pretium dui luctus.
</div>
</div>
.prevent-overflow {
overflow:hidden;
width:100%;
}
.left-side-image{
position:absolute;
right:320px;
}
.right-side-image{
position:absolute;
left:320px;
}
.content {
width:300px;
margin:0 auto;
position:relative;
}
In my initial code, I had a negative Left/Right (depending on the size of the image) in the .left-side-image and .right-side-image classess.
http://jsfiddle.net/6wp1h52c/
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%;
}