CSS float help needed - html

Guys Please help me to solve this floating problem.I tried different methods but anything didn't work for me.
In the html file,Small images are in the global container.Footer placed right below the global container.But now the footer comes to the top.
These are my css-
CSS of images-
style="margin-top: 25px; margin-right: 48px; float: right;"<br>
style="margin-top: 25px; margin-right: 48px; float: left;"
#footer_container{
width: 900px;
height: 10px;
margin-top: 10px;
padding-bottom: 10px;
position: absolute;
border: solid;
}
#global_body_container{
width: 746px;
position: absolute;
padding-bottom: 10px;
border-color: #c6c8cc;
border-style:dashed;
clear: both;
}
Thank you.

Place on the container of the floated elements overflow: hidden.
#global_body_container {
overflow: hidden;
}

You have position: absolute; on your #footer_container. Remove that and then add a clearing br under the footer, like so
<div id="global_body_container">
<img>
<img>
etc...
<br style="clear:both;" />
<div id="footer_container">
whatever content...
</div>
</div>
#footer_container{
width: 900px;
height: 10px;
margin-top: 10px;
padding-bottom: 10px;
position: absolute; //REMOVE THIS
border: solid;
}
Also, you may want to consider adding more to your border rule, such as thickness and color, e.g., border:1px solid black;

Create a new "content container". Put all your floating images in. Then place the new container right before your footer_container.

Because all your elements in global_body_container are float, so it cannot wrap those images visually.
A simple solution is add a stub at the end of global_body_container, and let it clear float elements.
<div id="global_body_container">
<img class="left">
<img class="right">
<div style="clear:both"></div>
</div>
shinkou has mentioned a clearing trick. You can also refer to clearfix mixin in compass. The expended css looks like:
.clearfix {
overflow: hidden;
*zoom: 1;
}
Also refer to discussion in What methods of ‘clearfix’ can I use?

Related

Having trouble with my css

Can seem to be able to move the image around, I need the image and the text side-by-side and it is, but I would like to be able to move the image done just a little bit so that the middle part or the image is lined up with the text. Right now it is the bottom and no matter what I do it wont move up or down, here is the html for the div and then the css
<div class="img">
<img src="/image/file/location">
<div class="imgwording">
<img src="/image/file/location" class="logoimage">
Test Text
</div>
<div class="sub">
<img src="/image/file/location" class="mail">
Test Text
</div>
<div class="imagelinks1">
Training &</br>Events
</div>
<div class="imagelinks2">
Trauma & Gender</br>Projects
</div>
<div class="imagelinks3">
Behavioral Health</br>Resources
</div>
</div>
CSS:
.imgwording {
text-decoration: none !important;
line-height: 1.28;
letter-spacing: 1.5px;
text-align: center;
font-size: 48px;
padding: 0px 60px !important;
position: absolute;
top: 65px;
width: 100%;
font-family: eb garamond,serif;
color: #fff;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
left: -110px;
display: inline-block;
}
.logoimage {
width: 50px;
height: 100px;
}
From what I understand, you have an image and text side by side but the image is lower than it should be. What you could do is add padding-bottom to the image CSS to change its position. How many pixels you would want to move would depends on how much higher you want the image to go.
Basically doing:
.logoimage {
width: 50px;
height: 100px;
padding-bottom: 5px; /* this could be any value depending */
}
Believe after some digging I got it, just need to add
position: relative;
to the .logoimage css
Add vertical-align:middle; to your logoimage class:
.logoimage {
width: 50px;
height: 100px;
vertical-align:middle;
}

How to center my <h3> text using css?

I have the following fiddle
The HTML is created by javascript. I can add/change the styles to the div's if needed but I cannot change the order of the HTML code.
I know I can use:
text-align: center;
But there is a catch :) The div containing the 4 images is put in the HTML code before the <h3> is. Since I cannot edit the HTML order I figured to lower the DIV with the images using margin-top: 70px; The problem is that this has an effect on the text in the <h3> which isn't centered anymore.
How to solve this? (pref with css3)
It's okay if the values of the DIV's in the HTML need to be changed in order to fix it
(I can change them)
Thanks a lot
The HTML code:
<div class="solitaireprefs" style="position: absolute; left: 0px; top: 0px; width: 80%; height: 80%; z-index: 100;">
<form method="get" action="">
<div style="float: right; margin-top: 70px; display: table; vertical-align: bottom;">
<div><img src="cardsets/test/spades1.svg" alt="Ace spades" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/clubs7.svg" alt="7 clubs" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
<div><img src="cardsets/test/hearts12.svg" alt="Queen hearts" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/backred.svg" alt="Card" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
</div>
<h3>Options</h3>
<h4>Images for size 119</h4>
</form>
</div>
The CSS:
div.solitaireprefs {
background-color: #fff;
border-radius: 7px;
border: 1px solid #ddd;
}
div.solitaireprefs form {
padding: 0 15px;
}
div.solitaireprefs h3 {
background: #e9e9e9;
margin: 0 -15px;
padding: .7em 0;
text-align: center;
border-radius: 7px 7px 0 0 ;
}
The real answer to the question is to figure out how you can arrange the dom elements correctly. Semantics is more important than you think. But since you are already kinda hacking the visuals, the quickest and dirtiest hack is to fix your padding:
padding: .7em 45%;
on the div.solitairprefs h3
Tweak the percentage to get the middle, but the missing 10% of the sum of left and right padding on the h3 is the space between where the options text appears (so tweak accordingly).
And since you're already manually centering, you can go ahead and get rid of the
text-align: center;
Instead of float:right; and margin:top on the element that contains the images, position it absolutely.
{ position: absolute;
top: 70px;
right: 10px;
}
Using absolute positioning takes it out of the flow of the document; which is what is messing up the centering on your h3.

div tag hiding behind image

I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>​

CSS centered divs side by side

I have this following chunk of my page.
Style:
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}
And example HTML:
<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>
When the page is displayed. the navcontainer is to the right of (as it should) but under the featuredcontainer. When I move the navcontainer up using relative positioning, it looks right, but there is a bunch of empty space at the bottom of the page. What do I do?
Surround your two divs with a "wrapper" div like so:
<div id="wrapper">
<div class="featuredcontainer">content</div>
<div class="lessonnavcontainer">menu</div>
</div>
Then to center them, add margins to the wrapper:
#wrapper { margin: 0px auto; }
Then to have the two divs be side by side, add a float:
.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }
In order for the centering to work, you need to declare a width on the wrapper:
#wrapper { width: 800px; }
Put both the nav and the featured containers into another wrapper div.
HTML
<div class='wrapper'>
<div class="navcontainer">
menu
</div>
<div class="featuredcontainer">
content
</div>
</div>
And get rid of all the relative positioning. Relative positioning is not recommended for basic layout issues like this. Use floats instead. The wrapper should have a fixed width, which allows it to be centered properly with margin: 0 auto.
CSS
.wrapper{
width:752px;
margin: 0 auto;
overflow:auto;
}
.featuredcontainer {
width: 450px;
height: 700px;
float:left;
border: 1px groove grey;
}
.navcontainer{
float:left;
height: 600px;
width: 300px;
background:#ff0;
}
JSFiddle http://jsfiddle.net/5w5SC/
Use the float property. Using float, css can position divs next to each other horizontally.
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}
Thats a starting point, try to use float left or float right and see what happens. Fiddle with it until it looks exactly how you want it.
To get them side-by-side you need to add the float attribute in the CSS. To get them to resize with page width you need to add relative widths to them. To center them on the page (horizontally) you need to put the divs inside a relative positioned div in the html. Here is a fiddle. http://jsfiddle.net/Ne5zs/
Be sure to introduce a clearfix (there are many versions of this technique) on any floated object; then center their containing block element using margin: 0 auto.

div right aligned dont keep at top

How can I keep my red box on top line when the center div has a very wide content?
When The centered div has much content, the red div goes to another line.
Do you know why this occurs?
Take a look at my code:
http://jsfiddle.net/5dC6T/3/
The issue is in the way that you've ordered your <div> elements. Try:
<div>
<div class="red-box"></div>
<img class="photo" alt="" />
<span>Name</span>
<span>Data</span>
<span>City</span>
</div>
CSS:
/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }
I've made these modifications to your current code: http://jsfiddle.net/Wexcode/38qYS/
Use this CSS:
#QuadroEvento div.TopoEvento div.euvou{
height: 90px;
width: 90px;
background-color: red;
position: absolute;
right: 0px;
margin-right: 0px;
}​
The key being: position: absolute;
You can also use position: fixed; etc., see here for more details: http://www.w3schools.com/cssref/pr_class_position.asp