So i’m stuck on how to move the content of the div down further with CSS. I could just move the div down in the HTML page, except this page is supposed to re-align when below 480 pixels wide. You hopefully will see a box wrapped in a <div> that represent drinks, how can I move that box down in the flow? Feel free to suggest some code.
Feel free to show some code.
Polyhedral,
Why do you want the first div to move down further? Generally the only thing that will push an element down is when either another element is on top of it or you use the margin property in CSS.
So, if you are going to do that with CSS the code would be
#elixers
{
margin-top: amount of pixels you want to push the div down;
}
Alternatively you could use position relative. Your CSS might look something like this,
body #elixers
{
position: relative;
top: 100px;
}
Perhaps you can find more info here,
http://askthecssguy.com/articles/nudging-elements-with-position-relative/
Best,
Shawn
Great thanks for the refresher on how position absolute/ relative works. The reason I want to move the div is so I can see what’s possible for mobile web design.
- The code is in the .zip
- Here what i’m visualizing
polyhedra, a little wrinkle. Your code seems to be using media queries at 480px to change the layout. At my default font sizes 600px is the width of the window when the elixirs div begins to flow offscreen and trigger a scrollbar (long before 480px is reached). You might consider allowing the logo image to scale a little smaller at narrower widths to reduce the total width of the two elements. Just a thought.
PS: the attachments in your latest post are still pending approval.
Give this a look. I modified your stylesheets and the HTML, including the media queries. This is not meant to be a polished product… just a demo that shows how the combined with of the two divs is wider than the media query shift point. The page WILL shift at 480px, but the “elixirs” div will overflow the right edge of the window before that occurs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link rel="stylesheet" type="text/css" href="lounge-mobile.css">
<link rel="stylesheet" type="text/css" href="lounge.css" media="screen and (min-width:481px)">
</head>
<body>
<div id="content">
<p><a href="#" title="home"><img src="media/logo.gif" alt="Head First Lounge"></a></p>
<h1>Welcome to the Head First Lounge</h1>
<p>
The Head First Lounge is, no doubt, the biggest trendsetter in Webville.
Stop in to sample the eclectic offering of elixirs, teas, and coffees,
or, stay a bit longer and enjoy the multicultural culinary menu that
combines a harmony of taste, texture, and color with the best in fresh
and healthy ingredients.
</p>
</div>
<div id="elixirs">
<h2>Weekly Elixir Specials</h2>
<p class="specialIMG">
<img src="media/yellow.gif" alt="Lemon Breeze Elixir">
</p>
<h3>Lemon Breeze</h3>
<p>
The ultimate healthy drink, this elixir combines
herbal botanicals, minerals, and vitamins with
a twist of lemon into a smooth citrus wonder
that will keep your immune system going all
day and all night.
</p>
</div>
</body>
</html>
/* lounge-mobile stylesheet */
body {}
h1 {
font-size:300%;
line-height:1;
}
h1, h2 {color:#007e7e;}
#content {
float:left;
}
#elixirs {
border:1px solid #007e7e;
padding:20px;
text-align:center;
line-height:1;
float:right;
}
/* lounge stylesheet */
#content {
margin-right:242px;
}
#elixirs {
width:200px;
margin-left:-242px;
}
#elixirs h2 {color:black;}
#elixirs h3 {color:#d12c47;}
Okey I see you moved some html around, in the future I will try write my html in a way that is presentable when I need to mobile. Great solution:P
FOLLOW-UP NOTE: The behavior of “overflowing the right edge of the window” seems to be peculiar to Firefox.
In Chrome and IE9, as the width of the browser window is reduced, the “elixirs” div drops below the “content” div when it bumps against the right edge of the logo image (the widest element in “content”)… as expected.