Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 21 hours ago.
This post was edited and submitted for review 20 hours ago.
Improve this question
I have tried to create a code that meets the specifications of the images below.
enter image description here
enter image description here
Make the image in DIV 2 have the same size in height as DIV 1.
Every time DIV1 has more or less paragraphs ( <p>), automatically the image in DIV 2 should be the same height as DIV 1 and grow proportionally (so as not to ruin the image).
For design, this is good, as it looks nice and aligned!
If this didn't happen, it would look like this:
enter image description here
Note: The image needs to grow and shrink proportionally in height and width in order not to ruin the image. The image must stop growing before the horizontal scroll bar on the page appears.
<!– I confess that I am a beginner!
I tried to use the code below, but the size of the image made DIV 2 bigger than DIV 1.
The expected was that both DIV 1 and DIV 2 would have the same size in height, except if the image in DIV 2 generated a horizontal scrollbar on the page, then the image in DIV 2 would stop growing, while DIV 1 would have the size in height I wanted.
I failed miserably LOL.
How would you solve this ? –>
<html>
<style>
.content-grids{
width: 100%;
background:#faa;
display:flex;
}
.content-grids .DivOne{
flex:1;
background:#aaf;
}
.content-grids .DivTwo{
flex:1;
background:#aff;
}
img {
margin: auto;
display: block;
}
</style>
<body>
<div class="content-grids">
<div class="DivOne">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
<div class="DivTwo">
<img decoding="async" src="https://i.pinimg.com/564x/22/b8/92/22b8925b497f674c4cad5b9a68ea68de.jpg" loading="lazy">
<div>
</div>
</body>
</html>
Related
I'm trying to figure out this layout issue, and I'm not entirely certain it's possible, but I thought someone here might have an idea.
<div class="outer" style="width:500px;">
<div class="rightFloat" style="float:right; width:max-content; height: 50px; background-color: transparent;">
<P>
This is content that should be right float.
</P>
</div>
<div class="Content" style="background-color:#eeeeac;">
<div class="conditionalDiv" style="background-color: #eeacee; border: 2px solid black">
This is conditional content that should not push the right float content down. The pink background should not be under the float content.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor pharetra quam id ullamcorper. Donec venenatis felis eu pulvinar porta. In non facilisis leo. Nulla ut lorem at enim tincidunt viverra. Vivamus id tempus eros. Fusce ultrices lectus sed ante hendrerit, et auctor tortor consectetur. Nam egestas sem tempor urna convallis, non maximus libero condimentum. Nullam non egestas neque.</p>
</div>
</div>
What I would like to do is to have the conditionalDiv (pink, conditional content that may or may not be present) only take up the space leading up to the rightFloat div. The rightFloat div should remain a consistent size (it's currently defined as width:max-content; I'd prefer not setting a fixed size if it can be avoided). In the referenced code, a working solution would have the border and background of the conditionalDiv not overlapping the space under the rightFloat div. (Float background should be white, with no border.)
The goal is that if the conditionalDiv is present, it's displayed beside the rightFloat div, and the main content continues below. Otherwise, if the conditional (pink) div is not present, the yellow content wraps around the rightFloat div.
I've tried a variety of ordering changes. I did a short test with flexbox, but I'm not sure a flexbox would work well in the conditional div situation.
Is there something I'm missing that would give me the behaviour I'm looking for?
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 3 years ago.
I am trying to draw some rich text in a border; here is an excerpt:
<!DOCTYPE html>
<html>
<body>
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;width:100%;height:100%;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
</body>
</html>
This seems to draw outside right border:
... while I would like to get something like:
Note: second image has been rendered using width:90%; which, of course, is not correct because right margin/padding is dependent on window size, while it should be a fixed number of pixels from right.
What is the "Right Way" to get result I need?
Simply get completely rid of the width and height settings for your outer container <div>. This will make the border's size depending on the size of the content inside.
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
This question already has answers here:
CSS two divs next to each other
(13 answers)
Closed 7 years ago.
I want to try achieve something like this image:
So far my attempt is that I have a div for the left column (that contains the image), and a div for the right column which contains the heading and the paragraph stuff. Both of them are displayed as blocks, and floated left. The left column has a fixed with of 96px since the image will be that size. The right div is a percentage width which I eyeballed (65% worked okay).
However, I don't think this is the right way to approach this without it messing up later. Am I approaching this correctly? What is the proper way to do this kind of thing?
This is exactly why Flexbox was invented. Many many many examples exist, for exactly this question, even on SO.
Very very simple CSS:
.container {
display: flex;
}
.container .image {
flex: 0 0 96px;
}
Demo: http://jsfiddle.net/rudiedirkx/vmukbe9u/
Flexbox is sort-of complicated-ish, but very worth it.
Syntax explanation here.
if you want to use float, make only the image float
body,
img,
.box {
border: solid;
margin: 1em;
}
img {
float: left;
}
.box {
overflow: hidden;
}
<img src='http://lorempixel.com/150/150' />
<div class="box">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
</div>
If what you want is exactly like the attached image shows , then use display:table-cell for both , give one 100% percent width , and the other fixed width in pixels:
CSS:
#parent
{
display:table;
}
#left-div
{
display:table-cell;
width:96px;
height:96px;
}
#right-div
{
width:100%;
display:table-cell;
height: auto;
}
HTML:
<div id="parent">
<div id="left-div"></div>
<div id="left-div"></>
</div>
To position two div's next to each other with some super basic CSS you can float one div to the left and one to the right, that will get them on the same line next to each other. Then you can specify the width of each, basically you need to start with 100% (the full width of the screen) and make one a portion and the other a portion so that when you add them together they add up to 100%.
HTML -
<div class="left">This is the div on the left</div>
<div class="right">This is the div on the right</div>
CSS -
.left{
float:left;
width:30%;
}
.right{
float:right;
width:70%;
}
Then to make it responsive you can make a media query (basically just sets specific styles for specific screen widths) that only affects screens that are up to and including 1024 pixels wide (tablet sized). I just arbitrarily choose 1024 pixels, you can make more specific ones or not include them all together, totally up to you. I have included this media query that just removes the float so that the div's will be arranged one on top of the other and then made their width 100%, so they both take up the full width of the screen
#media(max-width:1024px){
.left{
float:none;
width:100%;
}
.right{
float:none;
width:100%;
}
}
This kind of stuff can also be achieved really easily using a responsive framework like Bootstrap, with Bootstrap you would give your div's specific classes, those classes specify what the width of the div and arrangement should be on different screen sizes. you can include Bootstrap in your project then achieve this same affect like this
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">this div is on the left on big screens</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">this div is on the right on big screens</div>
</div>
Bootstrap is based on a 12 column grid, 12 columns = 100% of the screen width. That is why I used a width of 4 for the smaller left hand div and a width of 8 for the larger right hand. You can adjust these widths as needed. Hope this all helps.
I'm building a website, and have floated an image to the right of a div with some text to the left, which I have done many times before. However for some reason, the image is not floating completely over to the right in FF, but is in Chrome and IE/Edge. It's probably something really obvious, but any insight?
Firefox
Chrome/IE
HTML
<div class="wrapper">
<img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
<h1>Hammer Curl</h1>
<h2>Arms</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
<div style="clear:both"></div>
</div>
CSS
.wrapper {
margin: 0px auto;
width: 1000px;
padding: 20px 0px;
}
You should group your text and title elements together, and provide them a width.
From the snippet you supplied, it looks like both screenshots are actually obeying the rules you've supplied - both are floating the image to the right of your text.
However, there's no specification of how far over it should be -- just how far from the text (40px padding-left) and how large the ENTIRE item should be ("wrapper" # 1000px);
Try this:
<div class="wrapper">
<img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
<div class="content">
<h1>Hammer Curl</h1>
<h2>Arms</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
</div>
<div style="clear:both"></div>
</div>
CSS
.content {
width: 700px // or whatever you want to set it to
}
By wrapping the non-image elements together, and specifying a width for them specifically, you should be able to keep the experience the same across most browsers.
EDIT: Fixed some formatting.
I have the following scenario:
a two column layout made up of divs A and B (in that order) wrapped with a wrapper div centered at the page. I want B to stretch horizontally to 100% - length_of_A (length of A changes depending on its content), and also for both divs to stretch vertically to fill the height. If A is longer than B then B will stretch, otherwise- A will stretch.
I tried experimenting with width and height and position and overflow values, but couldn't make it work. How do I achieve something like this?
Unfortunally there is no cross-browser solution I know to do that using divs, but you could do that using tables like follows:
<table style="width: 100%; border-collapse: collapse;"><tr>
<td id="A"> <h1 style="white-space: nowrap;">...content...</h1> </td>
<td id="B"> ...content... </td>
</tr></table>
You should apply the "white-space: nowrap;" to all those elements that should rule the A column width.
This should do the trick in all common browsers.
Working demo (uses JavaScript): http://vidasp.net/tinydemos/layout-demo-2.html
However, you cannot set padding to the DIVs that represent the columns.
Also, for some reason setting exact widths doesn't work in IE - that's why I had to leave out 1px on the right.
I had same problem with my page but with 3 divs. My solutions was to use javascript code to get width and height of the page offsetHeight and offsetWidth.
For example use code bellow to get half of some element's width.
var midpoint = document.getElementById("MyElementId").offsetWidth/2; .
I think this is the simplest solution, only the left column may have a bug in IE6 if the content of the right column is longer. And also when the content of the left column is longer than the right column, the text wont fit. But you can fix this with a background image so you wont see that the text doesn't fit the div.
<style type="text/css">
* {
margin:0;
padding:0
}
#page {
background:red;
}
#left {
width:320px;
float:left
}
#right {
background:blue;
position:relative;
overflow:hidden
}
</style>
<div id="page">
<div id="left">
<ul><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li></ul>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, turpis nec mattis rhoncus, diam arcu dignissim turpis, vel interdum libero mi vitae lorem. Mauris placerat cursus odio at imperdiet. Integer pulvinar ante quis justo mattis mattis. Maecenas interdum mollis lacinia. Cras odio erat, pellentesque eu condimentum ut, ultricies vel neque. Morbi tristique diam elit, eget sagittis est. Nullam vestibulum elit sit amet odio dictum sodales. Duis elementum mollis elementum. Nulla purus elit, suscipit auctor sagittis eget, pretium vitae est. Suspendisse potenti. Integer sit amet ipsum sem. Vestibulum quis auctor leo. Suspendisse at elementum diam.</p>
</div>
</div>
(Tested in Safari 5, IE6, IE7 and IE8.)