I am trying to have 1 image and two elements floating right next to it (and the two elements on two separate lines). I tried working with display:inline-block so that each of the two elements comes on a separate line, but no luck. Also, the "brand" should be on top of the "model", thus first Mercedes and second W126. Is it possible to achieve this?
Fiddle here... Fiddle
HTML:
<div class="car"><img alt="" src=
"http://placehold.it/50x50&text=CAR"></div>
<div class="brand">
Mercedes
</div>
<div class="model">
W126
</div>
CSS:
.car img {
max-width:100%;
max-height:100%;
margin:0;
display:block;
}
.brand {
font-size:16px;
color:#333333;
font-family:'Droid Serif';
font-weight:bold;
padding-left:10px;
padding-bottom:0px;
padding-top:5px;
float:left;
margin-left:2px;
margin-right:2px;
margin-top:2px;
display:inline-block;
}
.model {
font-size:12px;
color:#5A5A5A;
font-family:'Droid Serif';
font-style:normal;
margin-left:2px;
margin-right:2px;
margin-bottom:2px;
padding-left:10px;
float:left;
display:inline-block;
}
It's easy if you change the HTML & CSS a bit:
.car {
display:inline-block;
}
.car img {
max-width:100%;
max-height:100%;
margin:0;
display:inline-block;
vertical-align:middle;
}
.car .makeAndModel {
margin:0 0 0 5px;
font-family:'Droid Serif';
display:inline-block;
vertical-align:middle;
}
.brand {
font-size:16px;
color:#333333;
font-weight:bold;
display:block;
}
.model {
font-size:12px;
color:#5A5A5A;
font-style:normal;
display:block;
}
<div class="car">
<img alt="" src="http://placehold.it/50x50&text=CAR" />
<div class="makeAndModel">
<div class="brand">
Mercedes
</div>
<div class="model">
W126
</div>
</div>
</div>
You can use some floats instead:
.car img {
max-width:100%;
max-height:100%;
margin:0;
float:left;
}
.brand {
font-size:16px;
color:#333333;
font-family:'Droid Serif';
font-weight:bold;
padding-left:10px;
padding-bottom:0px;
padding-top:5px;
margin-left:52px;
margin-right:2px;
margin-top:2px;
}
.model {
font-size:12px;
color:#5A5A5A;
font-family:'Droid Serif';
font-style:normal;
margin-left:2px;
margin-right:2px;
margin-bottom:2px;
padding-left:10px;
float:left;
}
<div class="car">
<img alt="" src="http://placehold.it/50x50&text=CAR">
</div>
<div class="brand">Mercedes</div>
<div class="model">W126</div>
Note that .brand has no float which allows the W126 to be pushed to the line below it, and the margin has been increased to space it properly.
Related
I'm trying to send a div block to the right side of my page with a float:right; but it doesn't work.
HTML :
<div id="footer_div">
<footer>
<div class="copyrights">
<a href="contact.html" style="
color:#8C8C8C;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
"><center>Site © 2013</center></a>
</div>
<div class="footer_links">
<a href="cgu.html" style="
color:#FFF;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
">Conditions d'utilisation</a>
<a href="about.html" style="
color:#FFF;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
">A propos</a>
<a href="help.html" style="
color:#FFF;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
">Aide</a>
<a href="contact.html" style="
color:#FFF;
font-weight:bold;
text-decoration:none;
font-size:xx-small;
">Contact</a>
</div>
</footer>
</div>
CSS :
footer
{
position:fixed;
bottom:0;
height:45px;
width:100%;
background:url(Templates/footer1.png) repeat-x bottom;
}
.copyrights
{
float:left;
position:fixed;
bottom:17.5px;
text-decoration:none;
margin-left:8px;
}
.footer_links
{
float:right;
height:20px;
width:240px;
position:fixed;
bottom:17.5px;
text-decoration:none;
border:0px solid;
}
Any idea how I can solve that ?
I want the .footer_links to go to the right side of my page.
Thanks !
Chris.
Take off the position fixed you have specified on the .footer-links class.
See this jsFiddle example.
http://jsfiddle.net/wCMqY/6/
footer
{
position:fixed;
bottom:0;
height:45px;
width:100%;
background:red;
}
.copyrights
{
float:left;
bottom:17.5px;
text-decoration:none;
margin-left:8px;
}
.footer_links
{
float:right;
height:20px;
width:240px;
text-decoration:none;
border:0px solid;
background:green;
}
.clear {
clear:both;
}
It's the position fixed that's causing you problems
I can't figure out how to set up the box model for my layout.
The "[container|x]" elements you see are placeholders, which are later replaced by php.
Here is a sketch of how it should look like:
I tried to google it and search here on stack overflow and of course I did find a lot about box models and problems with it, but nothing helped me here.
This is what I already have:
html:
<div class='headerimage'>
[container|1]
</div>
<div class='mainwrapper'>
<div class='femininHead'>
[container|2]
</div>
<div class='lineH1'> </div>
<div class='feminin'>
<div class='femininSub1'>
[container|3]
</div>
<div class='lineV1'> </div>
<div class='femininSub2'>
[container|4]
</div>
<div class='lineV2'> </div>
<div class='femininSub3'>
[container|5]
</div>
</div>
<div style='clear:both;'></div>
<div class='maskulinHead'>
[container|6]
</div>
<div class='lineH2'> </div>
<div='maskulin'>
<div class='maskulinSub1'>
[container|7]
</div>
<div class='lineV3'> </div>
<div class='shopButton'>
[container|8]
</div>
</div>
<div style='clear:both;'></div>
<div class='unisexHead'>
[container|9]
</div>
<div class='lineH3'> </div>
<div class='unisex'>
<div class='unisexSub1'>
[container|10]
</div>
<div class='lineV4'> </div>
<div class='unisexSub2'>
[container|11]
</div>
<div class='lineV5'> </div>
<div class='unisexSub3'>
[container|12]
</div>
</div>
</div>
css:
.headerimage {
position:absolute;
left:0px;right:0px;
background-color:#000000;
height:367px;
}
.mainwrapper{
position:relative;
top:367px;
}
.femininHead {
position:relative;
width:800px;
height:87px;
top:50px;
}
.femininHead .image1_headline{
line-height:30px;
font-size:24px;
position:relative;
}
.feminin {
position:relative;
}
.lineH1{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
bottom:2px;
}
.femininSub1 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV1{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}
.femininSub2 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV2{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}
.femininSub3{
width:266px;
height:125px;
position:relative;
float:left;
position:relative;
}
.maskulinHead {
position:relative;
width:800px;
height:87px;
top:127px;
}
.maskulinHead .image2_headline{
line-height:36px;
font-size:36px;
right:300px;
}
.lineH2{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:133px;
}
.maskulin {
position:relative;
}
.maskulinSub1 {
position:relative;
width:266px;
height:125px;
float:left;
position:relative;
}
.lineV3{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
position:relative;
height:128px;
width:1px;
}
.shopButton {
width:536px;
height:218px;
float:left;
position:relative;
}
.unisexHead{
width:259px;
height:125px;
position:relative;
line-height:36px;
font-size:36px;
}
.unisexHead .image3_headline{
line-height:36px;
font-size:36px;
}
.lineH3{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:594px;
}
.unisex {
position:relative;
}
.unisexSub1
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV4{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}
.unisexSub2 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV5{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}
.unisexSub3{
width:266px;
height:125px;
position:relative;
float:left;
}
Thanks in advance :)
can't see why box-model can help you with this. maybe you are looking for FlexBox! Or go classic and use display:inline-block for the nested boxes(3,4,5,7,8,10,11,12) and all others just row divs.
But don't use floats any more!
Check out this simplified solution on JSBin.
The basic idea is to wrap all the items except the 1st box in a containing wrapper .wrap. A horizontal margin of auto along with a fixed width will center it in the page. Within that, you have your side-by-side boxes float left and give them fixed widths. The div below them needs to clear the float.
Hope the example is helpful.
My issue is that when I zoom in or out of the page (in all the browsers I tried), only some parts of it are displayed as zoomed (the contents that are in the divs, but not the divs themselves). I put the borders to show it easily.
When I searched for a solution, all of them mentioned that it is because of fixed width values by using pixels (px). So, I used % when putting values to width and height; but still, the issue remains...
Here are some screenshots to illustrate my problem:
When zoomed-in:
When zoomed-out:
Here is my code:
HTML:
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="title_bar">
some txt here
<div id="title_img"></div>
<div id="title_txt"></div>
<div id="menu_navigation"></div>
</div>
<div id="title_bar_2">
some txt here
</div>
<div id="container_columns">
<div id="column_1">
<span id="column_1_content">some txt here</span>
</div>
<div id="column_2">
<span id="column_2_content">some txt here</span>
</div>
</div>
</body>
</html>
CSS:
html body
{
margin: 0;
width: 100%;
height: 100%;
background-color:#f2f2f2;
}
div#title_bar
{
height:4%;
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;
}
div#title_bar_2
{
text-align:center;
height:44%;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;
}
div#title_bar img
{
margin-top:1%;
float:left;
}
div#title_txt
{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;
}
div#menu_navigation
{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;
}
div#container_columns
{
margin:auto;
width:76.5%;
margin-top:2%;
height:27%;
border-style:solid;
border-color:blue;
}
div#column_1
{
height:100%;
width:49%;
float:left;
border-style:solid;
border-color:blue;
}
div#column_2
{
margin-left:1%;
width:48%;
float:left;
height:100%;
}
Hi This is happening because you are using the property height. try not to use it, if you want this property.
html body{
margin: 0;
width: 100%;
background-color:#f2f2f2;}
div#title_bar{
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;}
div#title_bar_2{
text-align:center;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;}
div#title_bar img{
margin-top:1%;
float:left;}
div#title_txt{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;}
div#menu_navigation{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;}
div#container_columns{
margin:auto;
width:76.5%;
margin-top:2%;
border-style:solid;
border-color:blue;
display:block;}
div#column_1{
width:48%;
float:left;
border-style:solid;
border-color:blue;}
div#column_2{
margin-left:1%;
width:48%;
float:left;}
In Chrome, notice that that input area under "Your contact info" lines up with the border for div#contact. Also notice that the textarea under "Message" does not line up with that border; it's moved in a couple pixels. This is not the behavior I prefer.
In Firefox, everything lines up on the left. It's a little difficult, but you can see that in this screencap. This is the behavior I prefer.
My problem is obvious: how do I get those input areas to line up on the left (as in the Firefox image)?
Here is the HTML (non-working skeleton form code) that's rendered for that portion of the page (which resides in the footer of the page).
<div id="footer">
<div id="contact">
<h1>Talk to me</h1>
<div id="email-me">You can email me at address#server.com<br/>
or fill out the form below!
</div>
<form>
<div id="email">
<h2>Your contact info</h2>
<input type="text"/><br/>
</div>
<div id="message">
<h2>Message</h2>
<textarea rows="10" cols="75"></textarea><br/>
</div>
<input class="buttons" type="submit" value="Send"/>
</form>
</div>
</div>
Here's the CSS. It's quite long, so I was going to edit out some parts, but I decided against it in case some small piece makes the difference.
#footer {
clear:both;
background-color:#8BA5B5;
min-height:400px;
font-size:13px;
font-family:Helvetica,Verdana,Arial,sans-serif;
color:#fff;
padding-left:105px;
padding-top:30px;
padding-bottom:45px;
position:relative;
top:5px;
overflow:hidden;
}
#footer h1 {
font-size:15px;
margin:0px;
margin-bottom:5px;
}
#footer a {
color:#DAEBF5;
text-decoration:none;
margin-bottom:5px;
}
#footer a:visited {
color:#333;
text-decoration:none;
}
#footer a:hover {
text-decoration:underline;
}
#email-me {
font-size:16px;
padding-left:2px;
margin-bottom:10px;
text-align:center;
}
#email-me a {
font-size:18px;
font-style:normal;
}
#contact {
float:left;
overflow:hidden;
font-style:oblique;
font-family:georgia,times,serif;
}
#contact h1 {
font-size:44px;
font-style:normal;
text-align:center;
font-family:helvetica,verdana,arial,sans-serif;
}
#contact h2 {
margin:0px;
font:inherit;
}
#contact input {
background-color:transparent;
border:1px solid #fff;
color:#fff;
width:50%;
}
#contact textarea {
background-color:transparent;
border:1px solid #fff;
color:#fff;
}
#contact #message {
margin-top:5px;
margin-bottom:5px;
}
#contact .buttons {
font-family:inherit;
font-weight:800;
font-size:12px;
padding:5px;
width:100%;
background-color:#fff;
color:#8BA5B5;
}
It seams that your margins are off... Are you using a CSS reset to level the style across all browsers?
try setting margin:0; to your inputs
For a css reset, I recommend:
http://meyerweb.com/eric/tools/css/reset/
#contact input, #contact textarea {
margin:0px;
}
I've a container, where i have some divs : header, content, footer (as a standart application).
this is the structure :
<body>
<div>
<div id="ROOT" >
<div id="ROOT_0" >
Header
</div>
<div id="ROOT_1" >
Content
</div>
<div id="ROOT_2" >
Footer
</div>
</div>
</div>
</body>
The actual CSS :
html {height:101%;}
body {background:#999999;}
#ROOT{ background-color:#333333; width:980px; margin-left:auto; margin-right:auto; overflow:auto;}
#ROOT_0{background-color:#FF9933; width:970px; text-align:center; float:left; margin-top:5px; margin-left:5px; margin-right:5px; margin-bottom:5px;}
#ROOT_1{width:980px; text-align:center; float:left; background-image:url(../img/sfondofc.jpg);}
#ROOT_2{background-color:#FF9933; width:970px; padding-top:5px; padding-bottom:5px; text-align:center; float:left; margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px; font-weight:bold; font-size:13px;}
background-color:#FF9933; width:970px; padding-top:5px; padding-bottom:5px; text-align:center; float:left; margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px; font-weight:bold; font-size:13px;
unfortunatly, on IE (6) i can't see the margin-bottom:5px; in the end, where i have the footer. Which propriety i need to change? Cheers
why did you set the height property of html to 101 percent ?