I need need to have each of my div's align to the edge of the main content div and stay on one line unless the dynamic content loaded is wider than a fixed width. Let's say 300px. I would like the main container to auto re-size according to content width with a margin of 20px on each side of the content. I want the content to go to automatically place it self on a new line if it exceeds the maximum width of the main container div. Here is my jsfiddle. I can't seem to get it to align correctly to the left or auto scale.
<div class='info_content'>
<div class='dealerName'><h3>{{dealerName}}</h3></div>
<div class='address'>{{address}}</div>
<div class='addressCont'>{{city}}, {{state}} {{zip}}</div>
<div class='telephone'><label for='phone'>Phone:</label>{{phone}}</div>
<div class='tags'><label for='Tags'>Tags:</label>{{tags}}</div>
<div class='dealerWebsite'><a href='{{href}}'>{{href}}</a></div>
</div>
CSS:
#DealerInfoContainer {
float: left;
margin-left: 50px;
max-width:400px;
height: auto;
border: 1px solid #000000;
}
#DealerInfo {
}
#DealerInfo p {
margin-top: -20px;
}
.telephone {
float: left;
}
.address {
float: left;
}
.addressCont {
float: left;
}
.tags {
float: left;
}
.dealerWebsite {
float: left;
}
.dealerName {
float: left;
}
.info_content {
width: 300px;
}
A different way, is to use display: inline-block on each div you want to float. like this this could be usefull if your content (as a can see) is variable
.inline{
display: inline-block;
}
If you want to use float:left, don't forget the clearfix at the end.
EDIT :
To make you code work, you must remove margin for the H3 and set a line-heigth with a vertical-align : jsfiddle
.clearfix{
clear:both;
}
.dealerName h3{
margin:0;
}
.align{
line-height :30px;
vertical-align: baseline;
}
For me the cleanest method is with display: inline-block.
Use this CSS:
div {float:left;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;}
It's compatible with all major browsers and does everything you want.
Related
I have a div than spans the entire width of the page. Then within that I have two images, one that's always 50x50 pixels, and then another one that is 400x90. The smaller image is floated to the right, and the larger one just remains on the left side.
I have it how I want it, except when I resize the window to smaller than the widths of the two images. When this happens, I would like the larger image to scale down, just to fill the remaining width. Instead now, it keeps its current width and jumps down underneath the smaller image.
What's the simplest way to make it scale down instead?
Here's a fiddle to illustrate the issue I'm having: https://jsfiddle.net/zdaujbaL/
And here's my code:
HTML
<div class="clearfix">
<a class="button">
<img src="//placehold.it/50x50">
</a>
<a class="logo">
<img src="//placehold.it/400x90">
</a>
</div>
CSS
div {
background-color: lightblue;
padding: 5px;
margin: 5px;
}
a.button {
float: right;
}
a.logo {
display: inline-block;
}
a.logo img {
width: 100%;
}
You should make the non-float element as block level and add overflow:auto
a.logo {
display: block;
overflow: auto;
}
a.logo img {
max-width: 100%;
}
JSFiddle: https://jsfiddle.net/zdaujbaL/5/
Alternatively, you could do it with CSS table + table-cell layout.
div {
background-color: lightblue;
display: table;
width: 100%;
padding: 5px;
}
a.button, a.logo {
display: table-cell;
vertical-align: top;
}
a.logo {
width: 100%;
}
a.logo img {
max-width: 100%;
}
(you'll need to update the order - logo first, button second in the markup)
JSFiddle: https://jsfiddle.net/zdaujbaL/6/
My footer and its content do not re-position proportional to each other when I reduce the height of the footer.
CSS code:
#footer {
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right;
height: 5px;
}
#footer p.left {
float: left;
text-align: left;
margin-left: 5px;
}
#footer p.right {
float: right;
text-align: right;
margin-right: 5px;
}
And this is what I am getting:
Anything I should do to resolve this?
Remove height and add overflow: hidden:
#footer
{
clear: right;
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
overflow: hidden;
}
<div style="clear:both;"></div>
just before footer div ends and also try removing height from footer
Well, you're not adding any context and any HTML markup. But this is important:
#footer {
clear: right; /* why are you doing this? **/
background: #d1dceb;
text-align: right;
padding: 20px;
width: 70%;
float: right; /* why are you doing this? **/
height: 5px;
}
take a look at those commented lines, which quite probably you don't need at all.
Now, into your issue, you can use two options:
1) clear floats by using the "clearfix" method: simply add an empty div that clears the floats of preceding elements, like this:
<div class="clearfix"></div>
and then in CSS:
.clearfix{clear:both; float:none;}
Obviously you can use this as many times as you want since you're using re-usable classes.
The option 2 is as follows:
#footer p.right:after {content:'';clear:both; float:none; }
What we do here is to add some "empty" content, yet we assign it a "clear:both" property to clear everything, more or less as if we have added that div in option 1
Of course option 1 is way better, but well, there you go
You're using float to position elements, which means that the height of the floated elements are set to 0, just like if you're using positioning: absolute. DON'T use floats! Use flex.
#footer {
background: #d1dceb;
padding: 20px;
width: 70%;
display: flex;
margin: 0 auto; /* center element */
}
#footer p {
flex: 1 1 auto; /* fill up the entire available space */
}
#footer p.right {
text-align: right;
}
<div id="footer">
<p>Left footer element</p>
<p class="right">Right footer element</p>
</div>
I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Media query, flex container and its order property should do the trick:
#media(max-width:767px) {
.container {
display: flex;
flex-wrap: wrap;
}
.content {
order: 1;
}
.sidebar {
order: 2;
}
}
Make sure to replace max-width value with your own mobile breakpoint.
Browser support for flex is also pretty decent now.
Assuming:
The two elements have a shared parent element
The content div appears BEFORE the sidebar in the source
You don't have to change the source order, you can achieve this with floats by default.
That is, in your desktop layout:
#content {
float: right;
width: 60%;
}
#sidebar {
float: left;
width: 40%;
}
Then, for mobile (using media queries or whatever other mechanism):
#content, #sidebar {
float: none;
clear: both;
}
Inside your mobile media queries set float:none.
Actually, I wanted to set layout like first layout so I had used:
.iconHome{
float: left;
border: 1px solid #73AD21;
width: 50%;
height: 100px;
background-color: aqua;
/*margin: 50px;*/
}
<div class="iconHome1">
</div>
<div class="iconHome1">
</div>
The result is the second layout!!!There fore, I think default "float:left" is not be set on mobile. You can use above way. Hope help you
Edit:
I tried some codes:
.iconHome1{
float: left;
border: 1px solid #73AD21;
width: 50%;/*185px*/
height: 200px;
background-color: aqua;
margin: 0;/*0 0 0 -7px*/
/*clear: left;*/
}
That means "width" & "margin" will effect to layout,although you have to set "float:left". Fix "width:49%", result:
Say I have the following DIVs:
<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>
How can I use CSS to place the sidebar DIV to the right of the main DIV, and set it to, say, 20% of the total width?
I'd also like to have some margins between the four DIVs, so that the layout doesn't look too cramped.
Would like it to work in "all" browsers, including that bastard IE6...
put main and sidebar in the wrapper, you can set the size/location of wrapper and preserve your layout.
#top {
/* top stuff */
}
#wrapper {
width: 800px;
margin: 0px auto; /* centers on page */
}
#main {
float: left;
width: 80%;
margin-right: 10px;
}
#sidebar {
float: left; /* by floating left here you have a greater control over the margin */
width: 20%;
}
#bottom {
/* bottom stuff */
}
use floats, negative margins and padding.
you can find good tutorials on http://alistapart.com about page layouting (i really recommend the holy grail) and it also deals a lot with cross-browser problems
http://www.alistapart.com/articles/holygrail
Try:
html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }
It's important for this kind of thing to use a reset CSS (there are others) as different browses have different default values for things like borders, margins and padding.
<div id="top">Page header</div>
<div id="main">
<div id="content">Main content</div>
<div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>
#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }
It's very very important that you set the doc type to strict, ala thusly:
If you do this, you wont need to clear your CSS (with a few exception) and can simply use the correct box models.
I will answer my own question with a link to this article which was exactly what I was looking for:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
I'm sure this a common problem, but couldn't find the exact answer :)
I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S
#main {
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 20px;
float: right;
border: 1px solid white;
}
<div id ="main">
<div id ="left_menu>&blablabal</div>
<div id ="content">blablb</div>
</div>
your margin-left of #content should include the width of #left_menu. Thus should be
#content {
margin-left: 170px;
/* float: right; */ /* no need for a float here */
border: 1px solid white;
}
You also don't need a position:absolute for your #main (unless other purposes)
So finally:
<style type="text/css"><!--
#main {
margin-left: 30px;
margin-top: 20px;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 170px;
border: 1px solid white;
}
.c{clear:both;}
--></style>
<div id="main">
<div id="left_menu>&blablabal</div>
<div id="content">blablb</div>
</div>
<div class="c"></div>
.c is to clear and pushes the bottom content off the floats.
What about this its all to do with your width on your container.
This works for me.
<style type="text/css"><!--
.Content{
Width:100%;
}
.FloatLeft{
float:left;
}
.FloatRight{
float:Right;
}
-->
</style>
<div class="Content">
<div class="FloatLeft"></div>
<div class="FloatRight"></div>
</div>
you will need to 'float' the main div, or use a clearing <div> or <br> after your content and left menu <div>s.
The problem is not "staying on the same level", but it's about the size of the container div.
This might help you: http://archivist.incutio.com/viewlist/css-discuss/63079
The nicest and easiest thing to do is to set overflow: hidden on the container, #main. I don't think this works in IE6 though.
try giving the main div an overflow: hidden; and taking away it's position: absolute;
which will give it a height equivalent to the greater height of the floating divs
Also, I don't know if you copied it from your page, but you're missing a close quotation in your left_menu id=""
#main{
display:inline-block;
width:100%;
}
and remove absolute to the parent;
#left_menu,#content{
....
vertical-align:top;
}