having some fun trying to layout these nested divs and trying to figure out clears. I'm trying to get my ad to the right of my content on www.ffldraftoptimizer.com but its showing up beneath my content. Did so much testing and searching for a solution, really can't say what I have tried and what I haven't. I've condensed the code and put in some comments as to how its basically laid out currently. Hoping someone might be able to check out the site and help out.
//container:
//div.MaxWidth
//{
//width:50%;
//height:auto;
//max-width:50%;
//text-align:justify;
//text-justify:inter-word;
//}
<div class="MaxWidth">
//#left {float:left}
<div id="left">
<div >
<img src="images/optimizefront.jpg" class="floatLeft" />
//content that wraps around the image as desired
</div>
</div>
<div>
//ad
</div>
</div>
you have to remove the MaxWidth, and try this, this will separate it.
#left
{
width:50%;
float:left;
}
#right
{
width:50%;
float:right;
}
<div>
<div id="left">
<img src="......."/>
</div>
<div id="right">
</div>
</div>
Related
First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.
First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.
So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}
I have the following split among 3 main div to be side by side. The very left div I want it to take up 60% of the screen and the rest 2 (description and resource) to take each 20%. When I run this all 3 are overlapping on the left portion. Below is my codes.
<div id="left" style="position:absolute;top:0px;left:0px;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="position:absolute;top:0px;left:0px;width:60%;height:400px">Map goes here.</div>
<div id="details" style="position:absolute;top:400px;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
They are overlapping because you've given them all absolute position and left 0. Absolute position removes the element from the normal flow of the page and puts it exactly where you indicate using the top/left/right/bottom properties. They will overlap as long as they have the same parent and same position properties.
Absolute position and left being 0 is making them overlap.
Please use css
see solution : http://jsfiddle.net/thecbuilder/vZ77e/
html
<div id="left">
<div id="map">Map goes here.</div>
<div id="details">Details</div>
</div>
<div id="description">description</div>
<div id="resource">resource</div>
css
#left, #description, #resource{
display:inline;
float:left;
height:100%;
}
#left{
width:60%;
background:#e6e6e6;
}
#description, #resource{
width:20%;
}
They are overlapping because you are using position absolute. instead place the divs at the top of the html page and do this instead:
<div id="left" style="float:left;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="float:left;width:60%;height:400px">Map goes here.</div>
<div id="details" style="float:left;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
This will place the divs beside each other
I am trying get a grid of div elements into a dynamic grid system. When the width and height of all elements are static (and most importantly all the same) it works by setting float:left on the element to get the desired effect.
HTML:
<div id="main">
<div class="someDiv">1 - Text</div>
<div class="someDiv">2 - Text</div>
<div class="someDiv">3 - Text</div>
<div class="someDiv">4 - A lot longer text.</div>
<div class="someDiv">5 - Text</div>
<div class="someDiv">6 - Text</div>
<div class="someDiv">7 - Text</div>
<div class="someDiv">8 - Text</div>
<div class="someDiv">9 - Text</div>
<div class="someDiv">10 - Text</div>
</div>
CSS:
div.someDiv {
float:left;
margin: 10px;
padding:5px;
width:150px;
display:inline-block;
}
If I however have one element that has a larger body of text inside it (thus having a larger height than the others) all elements which are on the row below and to the left of this seem to be "pushed" down. Behaviour can be observed here; jsFiddle.
What I wish to do is to get all div elements (in the example this would be elements 5,6 and 7) to be just under the elements above them (elements 1,2 and 3 in the fiddle).
How can I achieve this, whilst still keeping a dynamic height of each div?
Assuming the columns have a fixed width and you are ok with a fixed number of columns then rework the html to have fixed width columns (divs) that float left. Put equal width divs in them and the height won't matter.
If you want a dynamic number of columns with this method you would need to use javascript to move inner divs and decide the number of cols to have based on width then assign the dis to columns.
I believe angularjs ui-grid can handle them much more complicated situations often.
EDIT:
Here is a fiddle to demonstrate.
http://jsfiddle.net/6mDLC/
Maybe I misunderstood what you want, let me know if the fiddle doesn't do what you do want
HTML:
<div class="main">
<div class="col">
<div class="content">
Some text
</div>
<div class="content">
Some text
</div>
<div class="content">
Some text ASFKLAJJK ALKSJFLF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL
</div>
<div class="content">
Some text
</div>
</div>
<div class="col">
<div class="content">
Some text ASFKLAFJK ALKSJSKF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL
</div>
<div class="content">
Some text
</div>
<div class="content">
Some text
</div>
<div class="content">
Some text
</div>
</div>
<div class="col">
<div class="content">
more text
</div>
<div class="content">
Some text ASFKLAFJK ALKSJSKF LAJ SFLKJAS LFKJA LSFJ ALSKFJASL FK ALSKFJ ALKFJ AL
</div>
<div class="content">
Some text
</div>
<div class="content">
Some text
</div>
</div>
CSS:
.content{
width:150px;
border:1px solid red;
margin-bottom:10px;
}
.col{
margin:5px;
float:left;
}
JS:
$(".content").click(function () {
if ($(this).html().length > 40) {
$(this).html("This is just some random text");
} else {
$(this).html("This is just some random text, but is taking up more space than it was before. This will cause others to do weird stuff.");
}
});
Try using this
div.someDiv {
float:left;
margin: 10px;
padding:5px;
background:aqua;
width:150px;
display:inline-block;
overflow:auto;
height:50px;
}
Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.
Using CSS, is it possible to right-align two DIVs?
I have a title and I want to right-align a more link underneath it. The site is internal and so, unfortunately, IE7 is the primary browser. (We will upgrade to IE8 before the end of the year, and some are using Chrome). I'd like to avoid javascript, but I'm open to it.
The title changes, so absolute widths won't work. It should look something like this:
| Arbitrarily long title text
| more...
I've been all over the Googles looking for a solution, but everything I've found so far relates to right-aliging the content of a DIV, or to right-aligning a DIV to the page, or right-aligning a DIV within an absolutely sized DIV.
I can show you my efforts so far, but as none of them work, I don't think they're of much use.
<html>
<body>
<div style="float:left;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
<div style="width:0px; overflow:visible; white-space:nowrap;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
<!-- This sort of simulates what I want, but the title length is arbitrary and I don't want to have to measure the text -->
<div style="width:120px;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
</body>
</html>
If anyone knows of a duplicate question, I'd love to learn the secrets of your Google-fu!
EDIT
Image, as requested. The link is bordered with red. (I had to set the margin-left to 70px to achieve this affect.)
<div style="float:left; position: relative">
<div>Arbitrarily long title</div>
<div style="position:absolute; right: 0">more...</div>
</div>
http://jsbin.com/efixij/7/edit
Another way you might solve it (I don't have IE here, so I can't test it now, but I used similar styling on cross browser before).
Snippet
.title-block {
float: left;
position: relative;
padding-bottom: 1em;
}
.more {
position: absolute;
right: 0;
bottom: 0;
}
<div class="title-block">
<div>Arbitrarily long title</div>
<div class="more">more...</div>
</div>
This might not be very useful but give it a look:
Align main Div content to left and then the "more" div to righ as here :
<div style="float: left;">
<div>
Arbitrarily extra extra long title here
</div>
<div style="float:right;">
more...
</div>
</div>
<div>
<div> Business area </div>
<div> Inernal Audit </div>
<div style="text-align: right;"> More... </div>
</div>
<div class="one">
Arbitrarily long title Arbitrarily long title
<div class="two">more...</div>
</div>
.one{
width:auto;
float:left;
border:thin red solid;
margin:5px;
}
.two{
float:right;
}
DEMO