[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

div float over an other div

Posted on 2009-04-17
6
Medium Priority
?
1,641 Views
Last Modified: 2013-12-08
Good morning,

I would like to have a two columns and two lines layout.

Example :

<div id="content">
          <div id="top">
                    <div id="topLeft" />
                    <div id="topRight"/>
          </div>
         <div id="bottom">
                    <div id="bottomLeft" />
                    <div id="bottomRight"/>
          </div>
</div>

I've used float positionning but my "top" div and "bottom" div float over my "content" div.
(I've uploaded a screenshot)

What is wrong ? :)

Thank you for your help,
Steven  
//HTML
<div id="Page">
<div id="Main">
    <div id="Top">
        <img src="./Contnt/picture.JPG" alt="screenshot" />
        <div id="welcomeMessage">
            <h1 class="green">Save </h1> <h1>your bees</h1>
            <p><%= Html.Encode(ViewData["Message"]) %></p>
        </div>
    </div>
    
    <div id="Bottom">
        <div id="keyFeatures">
            <h1>Key Feature</h1>
        </div>
        <div id="whatsInside">
            <h1>Whats Inside</h1>
            <p><%= Html.Encode(ViewData["Message"]) %></p>
        </div>
    </div>
</div>
</div>
 
//CSS
body
{
	background-color: #FFFFFF;
	font-size: 0.75em;
	font-family: Arial, Verdana, Sans-Serif;
	color: #7A7A7A;
	margin: 0;
	padding: 0;
}
 
/*
/* PRIMARY LAYOUT ELEMENTS
-----------------------------------*/
 
#page
{
	width: 972px;
	margin: 50px auto 10px auto;
	border: solid 1px #e3e3e3;
}
 
#main
{
	margin-top: 20px;
	padding: 30px 47px 30px 47px;
}
 
div#welcomeMessage
{
	width: 323px;
	float:right;
}
div#keyFeatures
{
	float: left;
	width: 200px;
}
 
div#whatsInside
{
	float: right;
	width: 200px;
}

Open in new window

Capture.JPG
0
Comment
Question by:smuhr
  • 3
  • 2
6 Comments
 
LVL 3

Expert Comment

by:QualitySoftwareDevelopment
ID: 24166280
you need to add a top position to the div you want below
0
 
LVL 6

Expert Comment

by:JoachimMartinsen
ID: 24166286
Try using display:inline-block rather than float:left on divs.
0
 

Author Comment

by:smuhr
ID: 24166415
I add a top position to the div i want below (top : 10px for example) but it's not working
I tried inline-block instead of float:left on divs and it's not working to :(

Any ideas?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Accepted Solution

by:
JoachimMartinsen earned 1500 total points
ID: 24166499
If you use inline-block on both divs they appear on the same "line". As you can see in my example:
<html>
<head>
<style>
div {
	border: 1px solid #000;
}
#topLeft,#topRight,#bottomLeft,#bottomRight {
	width: 100px;
	height: 100px;
	margin: 10px;
	display: inline-block;
}
</style>
</head>
<body>
<div id="content">
          <div id="top">
                    <div id="topLeft">topLeft</div>
                    <div id="topRight">topRight</div>
          </div>
         <div id="bottom">
                    <div id="bottomLeft">bottomLeft</div>
                    <div id="bottomRight">bottomRight</div>
          </div>
</div>
</body>
</html>

Open in new window

0
 
LVL 6

Expert Comment

by:JoachimMartinsen
ID: 24166669
Sorry, forgot about IE.
Add the following IE-fix:
_display: inline;

Open in new window

0
 

Author Comment

by:smuhr
ID: 24168315
It's working, thank you !

But why my divs float over the main div when I use float positionning ?

Thank you :)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question