How to make a div stop wrapping?
Set this style on your div. It works in Chrome and IE. I haven't tested other browsers.
overflow: auto;
Do you mean you want <div class="objectives"> to appear below <div class="icon">? If so, div.objectives { clear: left; } should do the trick.
Or do you want the entirety of <div class="objectives"> to appear alongside <div class="icon">? If so, div.objectives { float:left; } should make it happen. You may also need to specify a width on div.objectives. Alternatively, remove the float code and set both div.objectives and div.icon to { display: inline-block; vertical-align: top; }.
This works just edit the code and replace it with the code below
<div class="icon"><img align="left" alt="" src="/resource/uploads_scope/issues/090113/090113_pairedText_featuredSkills.png"></div>
<div style="overflow: auto;">
<h5>Featured Skills:</h5>
<p>Compare and contrast; vocabulary; shades of meaning.<br>
<strong>Other Key Skills: forming and supporting a claim, inference, author’s craft, key ideas.</strong></p>
</div>
<div style="clear:both;">
</div>
</div>
Related
I have two div's that I am trying to position side by side but am having trouble. I understand that div's are block elements but I have never had trouble positioning them side-by-side before..
HTML:
<div class="contact">
<div class="team" id="staff-1">
<div id="DIV_2">
<img id="brian" src="../img/brian.png">
</div>
</div>
<div class="team" id="staff-1">
<div id="DIV_2">
<img id="brian" src="../img/brian.png">
</div>
</div>
</div>
I do not want to post all of the CSS because it is rather long for a SO post, but here it is loaded in a jsfiddle: http://jsfiddle.net/rynslmns/5pQJ7/
You can either use floating or inline-block elements:
.team {
float: left;
width: 33%;
}
OR
.team {
display: inline-block;
width: 33%;
}
I would choose "display: inline-block" as you don't have to clear the floating afterwards.
IDs "staff-1", "brian" and "DIV_2" are repeated. DOM id is unique.
You simply need to use css float to get them to be side by side.
.contact {
overflow: hidden;
}
.team {
float:left;
}
Here is your example code:
http://jsfiddle.net/jcfB3/
Note, your IDs were incorrect, you can't have 2 IDs that have the same value, I made them unique. Also, utilizing floats without any other content in a bounding block element has some issues which I fixed in the example code. See http://www.quirksmode.org/css/clearing.html for more info. It is the reason why I added overflow: hidden.
Ok so I'm trying to align an image(which is contained in a div) and some text(also contained in a div) on the same line, without setting width for the text, how can i do it? This is what I have so far.
<div id="container">
<div id="image" style="float:left;">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
</div>
When the text is short, the image and text can be fit into the same line, but my text is pretty long, and it automatically jumps on another line below the image.
Basically, now it's this: http://puu.sh/MPw2
I want to make this: http://puu.sh/MPvr
I'm been trying to solve this problem for like 3 hours I'm so noob please help? :S
Floating will result in wrapping if space is not available.
You can use display:inline and white-space:nowrap to achieve this. Fiddle
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<img src="tree.png"/>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
A very long text(about 300 words)
</div>
</div>
Try
<img src="assets/img/logo.png" align="left" />
Text Goes here
Simple HTML Attribute:
align="left"
Other values for attribute:
bottom
left
middle
right
top
I know this question is over 6 years old, but still, I would like to share my method using tables and this won't require any CSS.
<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>
Cheers!
Happy Coding
To get the desired effect, you should place the image tag inside the same div as your text. Then set the float: left attribute on the image. Hope this helps!
I was working on a different project when I saw this question, this is the solution I used and it seems to work.
#[image id] , p {
vertical-align: middle;
display: inline-block;
}
if it doesn't, just try :
float:right;
float:left;
or
display: inline instead of inline-block
This worked for me, hope this helped!
Method1:
Inline elements do not use any width or height you specify.
To avoid two div and use like this:
<div id="container">
<img src="tree.png" align="left"/>
<h1> A very long text(about 300 words) </h1>
</div>
<style>
img {
display: inline;
width: 100px;
height: 100px;
}
h1 {
display: inline;
}
</style>
Method2:
Change your CSS as follows
.container div {
display: inline-block;
}
Method3:
It is the simple method set width
Try the following css:
.container div {
overflow:hidden;
position:relative;
width:90%;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.image {
width:70%;
display: inline-block;
float: left;
}
.texts {
height: auto;
width: 30%;
display: inline;
}
Try
<p>Click on <img src="/storage/help/button2.1.png" width="auto"
height="28"align="middle"/> button will show a page as bellow</p>
It works for me
From another answer :
<table>
<tr style="background-color:white">
<th><b>To solve your doubts </b></th>
<th><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" style="width:150px" style="display:inline-block; "/></th><th style="float:right"></th>
<th><b> has the requisite clout.</b></th>
</tr>
</table>
Demo:
:D A little cheesy but, I thought, why not.
I built on the last answer and used display:table for an outer div, and display:table-cell for inner divs.
This was the only thing that worked for me using CSS.
Just set the img css to be display:inline or display:inline-block
U wrote an unnecessary div, just leave it like this
<div id="texts" style="white-space:nowrap;">
<img src="tree.png" align="left"/>
A very long text(about 300 words)
</div>
What u are looking for is white-space:nowrap; this code will do the trick.
<div id="container" style="display: flex;">
<div id="image" style="float:left; margin-top: 10px">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
use display flex and give margin-top(10 is approximate), please remove the float and give width to both div.
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>
Can someone please help me with this problem as i have been dealing with it for a long time now....
I am trying to get 3 divs on the same line next to each other one of the divs looks like this:
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center">
<font size="+1">
<em class="heading_description">15 pence per slot</em>
</font>
<img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">
<a href="gfh" class="order-small">
<span>order</span></a>
</div>
and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left
I'm surprised that nobody gave CSS table layout as a solution:
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
Works in IE8+
Check out a JSFiddle Demo
See my code
.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>
I'm not sure how I ended up on this post but since most of the answers are using floats, absolute positioning, and other options which aren't optimal now a days, I figured I'd give a new answer that's more up to date on it's standards (float isn't really kosher anymore).
.parent {
display: flex;
flex-direction:row;
}
.column {
flex: 1 1 0px;
border: 1px solid black;
}
<div class="parent">
<div class="column">Column 1</div>
<div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
<div class="column">Column 3</div>
</div>
here are two samples: http://jsfiddle.net/H5q5h/1/
one uses float:left and a wrapper with overflow:hidden. the wrapper ensures the sibling of the wrapper starts below the wrapper.
the 2nd one uses the more recent display:inline-block and wrapper can be disregarded. but this is not generally supported by older browsers so tread lightly on this one. also, any white space between the items will cause an unnecessary "margin-like" white space on the left and right of the item divs.
Old topic but maybe someone will like it.
fiddle link http://jsfiddle.net/74ShU/
<div class="mainDIV">
<div class="leftDIV"></div>
<div class="middleDIV"></div>
<div class="rightDIV"></div>
</div>
and css
.mainDIV{
position:relative;
background:yellow;
width:100%;
min-width:315px;
}
.leftDIV{
position:absolute;
top:0px;
left:0px;
height:50px;
width:100px;
background:red;
}
.middleDIV{
height:50px;
width:100px;
background:blue;
margin:0px auto;
}
.rightDIV{
position:absolute;
top:0px;
right:0px;
height:50px;
width:100px;
background:green;
}
2019 answer:
Using CSS grid:
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
Just add float left property on all the divs you want to make appear in a row other than last one. here is example
<div>
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</div>
</div>
This is easier and gives purpose to the never used unordered/ordered list tags.
In your CSS add:
li{float: left;} //Sets float left property globally for all li tags.
Then add in your HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Now watch it all line up perfectly! No more arguing over tables vs divs!
Check out the foundation rapid prototyping framework they handled this quite nicely, basically they allow you to use HTML like this:
<div class="row">
<div class="four columns">
</div>
<div class="four columns">
</div>
<div class="four columns">
</div>
</div>
This is the simplest HTML/CSS grid system that I've come across, it's based on 12 column grid.
Basically the columns are given a % width and left margin relative to the parent row. They columns have float set to left, position set to relative, and display set to block.
The row has several properties set on it that care core of an issue that normally causes the containing div to collapse to height of 0 preventing the following divs from getting 'pushed' down as they should.
You can find examples of using the foundation grid system here: http://foundation.zurb.com/docs/grid.php
If you don't want to use the entire framework the following CSS should do the trick with the example code I provided:
.row:after {
content: "";
clear: both;
display: table;
}
.four.column {
float: left;
width: 33%;
}
If you really specifically want a left center and right columns then use code like this:
CSS:
.row:after {
content: "";
clear: both;
display: table;
}
.left {
float: left;
width: 100px;
}
.center {
margin: 0 auto;
width: 100px;
}
.right {
float: right;
width: 100px;
}
HTML:
<div class="row">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
Put the divisions in 'td' tag. That's it done.
Another possible solution:
<div>
<h2 align="center">
San Andreas: Multiplayer
</h2>
<div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
</div>
</div>
Also helpful as well.
Why don't try to use bootstrap's solutions. They are perfect if you don't want to meddle with tables and floats.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
No meddling with complex CSS, and the best thing is that you can edit the width of the columns by changing the number. You can find more examples at https://getbootstrap.com/docs/4.0/layout/grid/
Given the following code:
<div id='upperDiv' style='min-height:200px'>
<div id='rightDiv' style='float:right; width:75%'>
content1
</div>
<div id='leftDiv' style='float:left; width:25%'>
content2
</div>
</div>
<div id='lowerDiv' style='height:50px; margin-top:5px'>
content3
</div>
When content of rightDiv and leftDiv passes the 200px height (the value of min-height), upperDiv does not grow, so its content overlaps the lower div.
If the float attribute is removed from the large content, it grows and causes problems.
I do not know which of rightDiv or leftDiv exceeds 200px inheight.
How can this be fixed?
Set #upperDiv any of the following:
overflow: hidden;
width: 100%;
or
float: left;
width: 100%;
or create a rule using CSS pseudo-elements (IE8+ compatible) like this
#upperDiv:after {
content: "";
display: table;
clear: both;
}
Best solution
Creating a reusable class rule like the following.
.group:after {
content: "";
display: table;
clear: both;
}
Now you can apply it to anything that needs this same functionality. For example...
<div id='upperDiv' class="group" ... >
P.S. If you require IE 6/7 compatibility, checkout this post.
This is intentional as floats are designed for things like images in paragraphs (where multiple paragraphs can wrap around the image).
Complex Spiral has a fuller explanation as to why and Ed Elliot describes a number of approaches to making containers expand around floats. I find the overflow: hidden approach works best in most situations.
After
<div id='leftDiv' style='float:left;width:25%;'>
content2
</div>
add
<div style="clear:both"></div>
It will solve your problem.
There is a new property introduced recently display: flow-root; Which will fix this issue without any hacks and have almost all major support
<div id='upperDiv' style='border: 1px solid #000000; display: flow-root;'>
<div id='rightDiv' style='float:right;width:75%;'>
content1
</div>
<div id='leftDiv' style='float:left;width:25%;'>
content2
</div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
content3
</div>