I'm supposed to do part of a social network site for a class project. The HTML file itself wouldn't do anything, it's just designing the visual part. I have to do something similar to the 'friends' section in Facebook.
I used a lot of inline css and now I'm thinking it wasn't such a good idea. If you are able to try it, the design messes up when you change the size of the window.
Can you help me or give me any tips so this doesn't happen? Thanks a lot
<!doctype html>
<html>
<head>
<title> </title>
</head>
<body>
<div style="border:1px solid black; width:600px;height:900px;margin:auto;">
<p style="margin:auto; background-color:#f7f7f7;width:600px;height:70px;"></p>
<p style="font-size:20px;font-weight:bolder;position:absolute;top:0px;left:415px;">Amigos</p>
<p style="font-size:15px;font-weight:bolder;position:absolute;top:40px;left:390px;">Todos mis amigos</p>
<p style="border:1px solid black;width:599px;height:0px;position:absolute;top:60px;"></p>
<p id="caja amigo 1" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:110px;left:390px;"></p>
<p id="caja amigo 2" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:225px;left:390px;"></p>
<p id="caja amigo 3" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:340px;left:390px;"></p>
<p id="caja amigo 4" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:455px;left:390px;"></p>
<p id="caja amigo 5" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:570px;left:390px;"></p>
<p id="caja amigo 6" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:110px;left:690px;"></p>
<p id="caja amigo 7" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:225px;left:690px;"></p>
<p id="caja amigo 8" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:340px;left:690px;"></p>
<p id="caja amigo 9" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:455px;left:690px;"></p>
<p id="caja amigo 10" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:570px;left:690px;"></p>
<img src="friends_24.png" style="width:20px;height:20px;position:absolute;top:20px;left:385px;">
<img src="action.jpg" style="width:100px;height:100px;position:absolute;top:131px;left:391px;">
<p style="position:absolute;top:130px;left:500px;font-weight:bold;color:#1f63d1;">Action Bronson</p>
<p style="position:absolute;top:150px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">3517 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:180px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:202px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:199px;left:566px;width:15px;height:15px;">
<img src="dave.jpg" style="width:100px;height:100px;position:absolute;top:246px;left:391px;">
<p style="position:absolute;top:245px;left:500px;font-weight:bold;color:#1f63d1;">Dave Chappelle</p>
<p style="position:absolute;top:268px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">2985 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:295px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:315px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:315px;left:566px;width:15px;height:15px;">
<img src="edmund.jpg" style="width:100px;height:100px;position:absolute;top:361px;left:391px;">
<p style="position:absolute;top:360px;left:500px;font-weight:bold;color:#1f63d1;">Edmund McMillen</p>
<p style="position:absolute;top:380px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">6219 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:410px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:430px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:430px;left:566px;width:15px;height:15px;">
<img src="eugenia.png" style="width:100px;height:100px;position:absolute;top:476px;left:391px;">
<p style="position:absolute;top:480px;left:500px;font-weight:bold;color:#1f63d1;">Eugenia Cooney</p>
<p style="position:absolute;top:500px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">8123 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:525px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:545px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:545px;left:566px;width:15px;height:15px;">
<img src="kim.jpg" style="width:100px;height:100px;position:absolute;top:591px;left:391px;">
<p style="position:absolute;top:590px;left:500px;font-weight:bold;color:#1f63d1;">Kim Kardashian</p>
<p style="position:absolute;top:610px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">11799 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:640px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:660px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:660px;left:566px;width:15px;height:15px;">
<img src="kimjong.jpg" style="width:100px;height:100px;position:absolute;top:131px;left:691px;">
<p style="position:absolute;top:130px;left:800px;font-weight:bold;color:#1f63d1;">Kim Jong-un</p>
<p style="position:absolute;top:150px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">???? amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:180px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:202px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:199px;left:866px;width:15px;height:15px;">
<img src="rhettlink.png" style="width:100px;height:100px;position:absolute;top:246px;left:691px;">
<p style="position:absolute;top:245px;left:800px;font-weight:bold;color:#1f63d1;">Rhett and Link</p>
<p style="position:absolute;top:268px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">7007 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:295px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:315px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:315px;left:866px;width:15px;height:15px;">
<img src="satchel.jpg" style="width:100px;height:100px;position:absolute;top:361px;left:691px;">
<p style="position:absolute;top:360px;left:800px;font-weight:bold;color:#1f63d1;">Russ Parrish</p>
<p style="position:absolute;top:380px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">3015 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:410px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:430px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:430px;left:866px;width:15px;height:15px;">
<img src="snoop.jpg" style="width:100px;height:100px;position:absolute;top:476px;left:691px;">
<p style="position:absolute;top:480px;left:800px;font-weight:bold;color:#1f63d1;">Snoop Dogg</p>
<p style="position:absolute;top:500px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">5289 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:525px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:545px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:545px;left:866px;width:15px;height:15px;">
<img src="trump.jpg" style="width:100px;height:100px;position:absolute;top:591px;left:691px;">
<p style="position:absolute;top:590px;left:800px;font-weight:bold;color:#1f63d1;">Donald Trump</p>
<p style="position:absolute;top:610px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">599 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:640px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:660px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:660px;left:866px;width:15px;height:15px;">
</div>
</body>
</html>
Yes, position:absolute; is messing your HTML file.
Here are some tips to fix it and to bring more structure into the file:
Give all the elements classes. Elements that look the same should have the same class. Then move the inline style to a stylesheet.
Rename the HTML elements. <p> stands for "paragraph" and therefore should only be used to divide up a longer text. Use <div> for simple blocks.
Remove all occurences of position:absolute;. Move all elements into the right container. (An element that is in front of another element should be inside it)
Layout the elements relative to their parent.
Here's a very simple example how you can layout the grid:
/* Stylesheet */
.container {
width: 500px;
margin: 20px auto;
border: 1px solid gray;
padding: 10px 0 10px 10px; /* spacing */
}
.profile {
display: inline-block; /* this lets the boxes float like words in a text */
border: 1px solid gray;
width: 222px;
min-height: 50px;
margin: 10px; /* spacing */
}
<div class="container">
<div class="profile">Box 1</div>
<div class="profile">Box 2</div>
<div class="profile">Box 3</div>
<div class="profile">Box 4</div>
<div class="profile">Box 5</div>
<div class="profile">Box 6</div>
<div class="profile">Box 7</div>
</div>
If you want the design to stay nice and not broken, you should consider looking at Responsive Web Design. There are a couple of good books on this topic like Responsive Web Design - by ETHAN MARCOTTE. This will fix your problem.
Secondly, for your own benefit you should remove those inline styling because
it make your html looks very messy
it is hard to make changes
My recommendation is to consider adding those css in an external file.
Related
I have two titles of some articles. It goes Camping tips, then its content and then the title of the next article. But somehow Mountaineering keeps selecting all the divs from Camping tips. I want to change only the background color of the h2 and it keeps changing it to all the divs inside Camping tips. How do I resolve this issue? PICTURES of how it looks like, only headings should be red, not the content:(https://snag.gy/rvJAh2.jpg) and (https://snag.gy/s8ouEA.jpg)
**Here is the code:
<h2 id="camptips" style="font-family:'courier'; background-color:#800000; text-align:center;font-size:30px">Camping tips</h2>
<div class="imgContainer">
<h3 class="head3"> 1.Create a makeshift lantern.</h3>
<img src="stylesheets/images/tip1.jpg" alt="TIP1" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 2.Sage - a natural bug repellent.</h3>
<img src="stylesheets/images/tip2.jpg" alt="TIP2" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 3.Spice that shit up.</h3>
<img src="stylesheets/images/tip3.jpg" alt="TIP3" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 4.Pack a cooler like a boss.</h3>
<img src="stylesheets/images/tip4.jpg" alt="TIP4" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 5.Hide your valuables in soap.</h3>
<img src="stylesheets/images/tip5.jpg" alt="TIP5" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 6.Make calzones. And cook over fire.</h3>
<img src="stylesheets/images/tip6.jpg" alt="TIP6" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 7.You can cook anything in foil.</h3>
<img src="stylesheets/images/tip7.jpg" alt="TIP7" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 8.Pre-make your pancakes.</h3>
<img src="stylesheets/images/tip8.jpg" alt="TIP8" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 9.Cook all your hot dogs at once.</h3>
<img src="stylesheets/images/tip9.jpg" alt="TIP9" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 10.Never lose keys in the water.</h3>
<img src="stylesheets/images/tip10.jpg" alt="TIP10" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 11.Get comfy with padding.</h3>
<img src="stylesheets/images/tip11.jpg" alt="TIP11" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 12.Know your knots!</h3>
<img src="stylesheets/images/tip12.jpg" alt="TIP12" width="350" height="300">
</div>
<h2 style="font-family:'courier'; background-color:#880000; text-align:center; border: 5px solid black;font-size:30px">Mountaineering</h2>
I changed the
.imgContainer {
float: left;
margin: auto;
padding: 25px;
}
to
.imgContainer {
display: inline-block; /* <-- changed this */
margin: auto;
padding: 25px;
}
and now it works perfectly.
There is something there is controlling the height on the div div tag with the green border here:
Can anybody see in the CSS what that is through the developer tools? I cannot figure it out.
I need to make a grid there is looking like this, but the height of the green bordered div tag has been stopping me. The important thing is that the text should still be centered.
This is actually how the code should be, but the height stops that:
Here is the code there is online:
div class="background-image" #Html.Raw(topImageStyling)></div>
<div class="top-area" style="border: 4px solid red;">
<div class="container col-md-8" style="border: 4px solid green;">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl center">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
</div>
Per our discussion in the coments, this is how the html should be structured. Then just remove position:absolute; from .background-image and remove min-height:500px; from .container
<div class="background-image" #Html.Raw(topImageStyling)>
<div class="top-area" style="border: 4px solid red;">
<div class="container col-md-8" style="border: 4px solid green;">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl center">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
</div>
</div>
I'm trying to get the images on both of divs below to act as a left-column while the accompanying text acts as a right column, both in the same row.
Each row should have the other images and texts along with it. Somewhere in the shuffle, I've got my divs mixed up and they aren't working properly. I need the text to stay within the container on the right. What am I missing?
.toplinks {
width: 300px;
padding: 20px;
overflow: hidden;
}
.icon {
width: 30%;
float: left;
}
.hlbox {
width: 300px;
border: 1px solid;
border-radius: 9px 9px 9px 9px;
border-color: #999999;
background-image: url(http://ejgh.org/templates/ejgh/images/HLHeader.png), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top, bottom;
padding: 100px 20px 25px;
overflow: hidden;
}
.HLrow {
display: block;
border: 1px solid;
border-color: green;
width: 100%;
}
.HLicon {
width: 30%;
border: 1px solid;
border-color: red;
display: table-cell;
float: left;
height: inherit;
}
.HLtext {
width: inherit;
border: 1px solid;
border-color: purple;
}
<div class="toplinks">
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/findphysicianicon.jpg" alt="Find a Physician Icon" /></div>
<div class="text">
<h3>Find a Physician</h3>
<hr />Let us help you pick a doctor that fits your needs</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/paymybillicon.jpg" alt="Pay my Bill Icon" /></div>
<div class="text">
<h3>Pay My Bill</h3>
<hr />Conveniently pay your EJGH bill</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/myejghicon.jpg" alt="myEJGH.Org Icon" /></div>
<div class="text">
<h3>My EJGH.Org</h3>
<hr />See your up-to-date medical information</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/edocicon.jpg" alt="eDoc icon" width="75" /></div>
<div class="text">
<h3>eDoc</h3>
<hr />$49 Doctor visits via smartphone or online</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/mdportalicon.jpg" alt="" width="75" /></div>
<div class="text">
<h3>EJGH MD Portal</h3>
<hr />Physician login for portal access</div>
</div>
</div>
<p></p>
<!--Start HL Table-->
<div class="hlbox">
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_memberbutton.png" alt="Image of Apple and Weights for homepage" width="100%"/></div>
<div class="HLtext">
<h3>Become a Member</h3>
<hr />
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_communitybutton.png" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="100%" /></div>
<div class="HLtext">
<h3>Community Events</h3>
<hr />
<p>Learn more about the classes, events, support groups, and health screenings we offer.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_tvbutton.png" alt="Image of Liz Delsa Healthy Lifestyles Host" width="100%" /></div>
<div class="HLtext">
<h3>Watch TV Segments</h3>
<hr />
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_magbutton.png" alt="Summer 2016 Healthy Lifestyles Cover" width="100%" /></div>
<div class="HLtext">
<h3>Read the Magazine</h3>
<hr />
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</div>
<!--End HL Table-->
</div></div>
<!--End Box Div—>
Also, the boxes around the HLdiv can go away - I just was using those to try to get an eye for what's pulling where.
Thanks again.
If I understood correctly, all you have to do is add display: table-cell; to the HLtextclass.
I don't really know anything about CSS. This question ( How can I align text directly beneath an image? ) is pretty much exactly what I need. I have 4 images and I would like them side by side, with text that correspondences with each specific image under that image. I've never used CSS so I got the images set in HTML up until that part using the directions in the question link that i posted, and the text for each image is under neither that image, but the images are not aligned in a row straight across, which is what I don't understand how to do.
Here is the coding I have:
<div class="container">
<div class="img-with-text">
<img src="images/CarlCall.png" border="0" alt="Carl Call" width="177" height="229" style="border: 2px solid black;" />
<p>Carl Call<br />(931)268-2040<br />Email Carl Call </p>
</div>
<div class="img-with-text">
<img src="images/sg.png" border="0" alt="Sjon Gentry" width="177" height="229" style="border: 2px solid black;" />
<p>Sjon Gentry<br />(931)268-3273<br />Email Sjon Gentry</p>
</div>
<div class="img-with-text">
<img src="images/jm.png" border="0" alt="John Mabery" width="177" height="229" style="border: 2px solid black;" />
<p>John Mabery<br />(931)268-0651<br />Email John Mabery </p>
</div>
<div class="img-with-text">
<img src="images/tr.png" border="0" alt="Ted Ragland" width="177" height="229" style="border: 2px solid black;" />
<p>Ted Ragland<br />(931)268-9387</p>
</div>
</div>
<p> </p>
Any help would be greatly appreciated! This website for our church has just kind of got thrown at me to do, but I haven't learned CSS yet so I'm lost on some things.
Try - DEMO
.img-with-text {
float: left;
margin-right: 1em;
text-align: center;
}
Try this:
<style type="text/css">
.img-with-text { float: left; text-align: center}
</style>
<!-- Your code -->
<div class="container">
<div class="img-with-text"><img src="images/CarlCall.png" border="0" alt="Carl Call" width="177" height="229" style="border: 2px solid black;" />
<p>Carl Call<br />(931)268-2040<br />Email Carl Call </p>
</div>
<div class="img-with-text"><img src="images/sg.png" border="0" alt="Sjon Gentry" width="177" height="229" style="border: 2px solid black;" />
<p>Sjon Gentry<br />(931)268-3273<br />Email Sjon Gentry</p>
</div>
<div class="img-with-text"><img src="images/jm.png" border="0" alt="John Mabery" width="177" height="229" style="border: 2px solid black;" />
<p>John Mabery<br />(931)268-0651<br />Email John Mabery </p>
</div>
<div class="img-with-text"><img src="images/tr.png" border="0" alt="Ted Ragland" width="177" height="229" style="border: 2px solid black;" />
<p>Ted Ragland<br />(931)268-9387</p>
</div>
</div>
<!-- End of your code -->
<p style="clear: both">Something more here </p>
Try setting text-align: center in your css for class .img-with-text, and maybe display images as block. Something like this:
.img-with-text { float: left; text-align: center; }
.img-with-text img { display: block; }
a bit vague. I use news system, on left side i want to get news from world, on right i wont to get news from my country. I really don't know how to solve this problem:http://i48.tinypic.com/15rxzkw.jpg
source:
<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/> <br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
</div>
You need a to clear your floating divs. Put this :
<div style="clear: both;"></div>
http://www.quirksmode.org/css/clearing.html
For example:
<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">aaaaaaaa</div>
<div style="border:1px solid blue;width:400px;float:right;">bbbbbbb</div>
<div style="clear: both"></div>
<div style="border:1px solid blue;width:400px;float:left;top:0px;">cccccccc</div>
<div style="border:1px solid blue;width:400px;float:right;">dddddddddd</div>
</div>
Its because of the <br /><br />
Remove them because they push element 2,3 and 4 2 rules down.
Also try to separate styles from your html and never use <br /> for styling. (W3C semantics)
You could try this:
<div style="width:1000px;">
<div style="float:left;">
<div style="border:1px solid red;width:400px;">aaaaaaaa</div><br/><br/>
<div style="border:1px solid blue;width:400px;">bbbbbbb</div>
</div>
<div style="float:left;">
<div style="border:1px solid blue;width:400px;top:0px;">cccccccc</div>
<div style="border:1px solid blue;width:400px;">dddddddddd</div>
</div>
</div>