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.
Related
I'm kinda stuck with this small issue that's breaking my layout. On the home page I have a blue box which is serving as my main container. Within my main container there are two more boxes which are on the right side of the screen which contain contact info. Also within the headline-container there is an H2 which say's -- "Satisfaction is our strongest point"
So what's wrong? Well nothing looks wrong atm but what if wanted to accurately center the H2 "Satisfaction is our strongest point" within it's headline-container which is the light blue large rectangle. So I write this CSS to try accurately center the text within headline-container
%align {
position: relative;
top: 50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
Hold my breath and bang crash..
My entire layout breaks..I'm thinking this due to a parenting issue with the H2. In my HTML I am inserting the h2 class just bellow the div class for large-8 columns which in this case is not the correct parent to (center the text within.) The element that I want to center the text within is headline-container (light blue box). To simply put it -- My layout seems to be breaking as soon as I change the h2's parent to headline-container and add the styles above.
Here is the HTML
<div class="headline-container">
<div class="row">
<div class="large-8 columns">
<h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
</div>
<div id="contact-info" class="large-4 columns">
<div class="phone-box">
<div class="number">
<a id="phone-number" href="tel:808-848-8821">808-848-8821</a>
</div>
</div>
<div class="email">
<div class="email-box"><a id="email-contact" href="mailto:etoile#hawaii.rr.com">etoile#hawaii.rr.com</a>
</div>
</div>
</div>
</div>
</div>
I've used a temporary not so accurate way of centering my H2 by applying this padding to the text. It looks fine but something deep down tells me it's not 100% accurate and that bothers me..Any suggestions on why my layout is breaking?
padding-top: 40px;
Here's the link
http://kapena.github.io/pp_web/
Thax for reading and I look forward to you're suggestions and comments.
Setting a fixed height to the container (div.columns) of the h2 fixes this.
Example
<div class="large-8 columns">
<h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
</div>
CSS
.columns {
height: 218px;
}
.satisfaction {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You could just use h2{text-align: center} or failing that .row{display: block; position: relative; margin: 0 auto; width: 100%;} you dont need the translates
try this for h1 element
h2{
display:inline-block;
margin: 0 auto;
}
This is my code >> http://jsfiddle.net/374Rk/1/
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="chef"></div>
<div class="social"></div>
</div>
As you can see, I have several divs inside a big div container. Everything is centered, but I want the social div (last one) to stick to the right, with a margin of 20 px so everything is in place. Which one is the best way to do this?
If I give social a relative position, I could do this by simply adding the right property with 590px. Is this the correct way to do it? It's not that elegant! Also, if I float it right, it won't be anymore on the container (because I floated it).
This has been always bugging me while working on CSS. I hope you guys can help!
What you need to do is set the floating of your .social-div to right. To let the wrapper still wrap all of its childs a clearfix can help:
HTML:
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="chef"></div>
<div class="social"></div>
<div style="clear:both;"></div>
</div>
CSS:
.social {
width: 200px;
height: 25px;
float:right;
margin-right:20px;
background-color: #FF0;
}
http://jsfiddle.net/AvLU8/
If you don't want to float it (and correct everything), you could add text-align: right; to the .container and display: inline-block; margin-right: 20px; to .social.
http://jsfiddle.net/374Rk/3/
But I don't know what you want inside each div. So, probably you'll need to add text-align: left; to each div.
MartÃnez,
I have read out your query and find a solution using JQuery.
$(document).ready(function() {
$('.container div').each( function() {
container = $(this).attr('class');
content = $(this);
if(content == "social"){
$( ".container" ).addClass( "social" );
}
});
});
Check on below url
http://jsfiddle.net/374Rk/30/
Check this
http://jsfiddle.net/374Rk/17/
.social{
width: 200px;
height: 25px;
background-color: #FF0;
margin-right:0px;
margin-left:590px;
}
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>
I have multiple elements in the a single div.
I want to align one element as "text-align: right" and another element "text-align: left"
Check the below code:
<div class="image_meaning" style="display: none; background-color: white; height: 35px; margin-left: 1px;">
<input type="checkbox" id="points" value="Temporal Filter" style="text-align: left; "/>
<label for="tempral_filter" style="text-align: left; ">Points</label>
<img style="text-align: right;" src="{{ STATIC_URL }}img/cross.png"/>-abc
<img style="text-align: right;" src="{{ STATIC_URL }}img/blue_triangle.png"/>-cde
</div>
but when I run the code it places both the element to the left.
any idea how to do it?
Answer
There are a few ways to solve your issue the most common one is using the css float property (as of 2016). The more modern ways are using flexbox or grid.
Solution using flexbox
You could use display: flex to do this.
Flexbox is only supported by newer browsers, If IE (9 and below) is your friend please stay away from this method.
Example html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
Example css:
.wrapper { display: flex; }
.block { width: 50%; }
Live demo.
Solution using grid
You could use the new display: grid to do this.
Grid layout is only supported by the most modern browsers (Sep 2017), If you are building on evergreen browsers then great, if not use flex.
Example html:
<div class="wrapper">
<div class="block"></div>
<div class="block"></div>
</div>
Example css:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
Live demo.
Solution using float
The css float property is the classic way to do this and can be dated back to prehistoric times so it supports basically every browser. The only caveat to this would be the clearfix issue (see below).
Example html:
<div class="wrapper">
<div class="block-left"></div>
<div class="block-right"></div>
</div>
Example css:
.block-left { float: left; }
.block-right { float: right; }
Please be aware that floated elements cause their parent to disregard them when it comes to their height. If that is an issue (usually it is), you can use the clearfix hack to solve this situation.
You would define it like so:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
And then on your parent element:
<div class="wrapper cf">
This will allow the parent to correctly receive the floated elements height.
Read more about what is the clearfix hack.
Live demo.
Other solutions
Solution using inline-block
You could also possibly use the inline-block property to put your elements side by side.
Note that the inline-block option will need to account for white space in the html between the blocks. To counter this, either remove the space like below, add a negative margin or define the font-size on the parent as 0.
Example html:
<div class="wrapper">
<div class="block"></div><div class="block"></div>
</div>
Example css:
.block { display: inline-block; }
/* Optional zero font for wrapper
Then reset blocks to normal font-size */
.wrapper { font-size: 0; }
.block { font-size: 16px; }
/* Optional negative margin if you can't
remove space manually in the html.
Note that the number is per use case. */
.block { margin-left: -.25em; }
Live demo.
Solution using position: absolute
Another way to do it would be to absolutely position your elements with a relative container. This method has the issue of being less flexible than the others when building responsive layouts and alike.
Example html:
<div class="wrapper">
<div class="block block-left"></div>
<div class="block block-right"></div>
</div>
Example css:
.wrapper { position: relative; }
.block { position: absolute; }
.block-left { left: 0; }
.block-right { right: 0; }
Live demo.
Why your solution is not working
You are using the text-align css property which will effect inline elements and text but it can't be used to shift the element like you would with the float property.
The text-align property effects the children of the element it is applied to.
Use float: left and float: right instead of text-align
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>