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?
Related
I have an inline-block element containing a floating element, and some text that is to flow around it:
<div style="background: yellow; display: inline-block">
<div style="float: left; width: 128px; height: 128px; background: cyan">Float</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br>
Vivamus blandit porta rhoncus.<br><br>
Integer egestas, lectus ac finibus sagittis, nisl diam scelerisque risus, id malesuada odio tortor in elit.<br><br>
Sed pellentesque ligula enim, at porta nibh viverra quis.<br><br>
Integer egestas, lectus ac finibus sagittis, nisl diam scelerisque risus, id malesuada odio tortor in elit.
</div>
On Internet Explorer, this renders as expected:
Firefox and Chrome render the same HTML differently:
Notice how in the Firefox rendering, the width of the inline-block is such that it precisely fits the text without the float. This causes lines that do not fit once the float is added in to break unnecessarily.
It would appear that Firefox and Chrome render this construction by first (1) computing the preferred width of the inline-block as if the float weren't there, (2) adding the float, and (3) laying out the flowing text around the float while using the width computed in (1) as the width of the inline-block.
The behavior I want here is the behavior implemented by Internet Explorer. Is there any way to achieve the same effect in other browsers such as Firefox and Chrome?
I think you should give a specific font-size to the text or else it will take default size as set in the browser which may be different. Also give some width to the wrapper element so that the text flow get same amount of space for all the cases.
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 am not new to HTML or CSS (but I can't claim to be an expert either) and for the life of me what seems to be a simple "Float" in a div tag has completely perplexed me.
I assumed a simple:
<div style="float: left;"><img src="....>Text Text text<br>Text Text Text</div>
Would place my image on the left and by default start wrapping my text on the right starting at the top right of the image but instead the wording is starting at the lower right of the image and wrapping underneath. Given this is my first post I am unable to insert screenshots but I can send them along if needed.
I have done the code in the following manner given I have a stylesheet but I tried applying the style in the HTML as well (as per the above example) with the same result:
CSS
.img-float-left{float:left;}
HTML
<div class="img-float-left"><img src="....>Text Text text<br>Text Text Text</div>
What the heck am I doing wrong? I also tried applying this class to the IMG tag but it produced the same result whereby the text is sitting under the image. I have searched high and low but can't seem to find the answer however I know I'm probably overlooking something simple.
You're correct to try to float the image instead of the parent div.
Put the img-float-left class on the img instead.
The img tag also isn't closed, and the src attribute is missing a closing quote, but that may just be a copy/paste error. Would help to see your actual code.
Using just float: left on the img works fine given this example.
JSFiddle
Depending on how you are using the div in your layout, you need to float the img within the floated div and keep the content of the div within the same block formatting context by using overflow: auto.
The result is that the div forms a self-contained block that contains the image and the
text, and the div, can then be floated left or right as needed in the layout.
div {
float: left;
overflow: auto;
border: 1px dotted blue;
width: 50%;
}
div img {
float: left;
padding: 0 10px 10px 0;
}
<div><img src="http://placehold.it/100x100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</div>
first of all you are floating the <div> tag and it place the container of image( witch is div on the left side,not the image)
instead of floats you can use align for <img> tag. here is how to use it.and here is a fiddle that I create for you.
<div class='image-left'>
<img src='http://placehold.it/100x100'/>
text text text text text text text text text text text text ......
</div>
css:
.image-left img {
vertical-align:top
}
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.)