CODEWITHSUNDEEP
htmlcss
user2733496
user2733496

Reputation: 23

How i can make these divs work on small screens?

So on my screen this works fine on all browsers, but when i try to view my site on laptop or a smaller screen #sidebar and #center move to the left. I assume it has something to do with #sidebar's margin-left but is there any other way to make sidebar and center go under the header and next to each other?

#header {
  background-image:url(media/dddd.png);
  margin-left:auto;
  margin-right:auto;
  width:1000px;
  height:250px;
  position:relative;
}

#sidebar {
  height:800px;
  width:300px;
  background-color:#CCFFFF;
  float:left;
  margin-left:23.5%;
  margin-right:auto;
  position:static;
}

#center {
  margin-left:auto;
  margin-right:auto;
  height:800px;
  width:700px;
  background-color:white;
  float:left;
  border:1px solid black
}

Upvotes: 0

Views: 136

Answers (3)

Evan Bashir
Evan Bashir

Reputation: 5551

I think the issue lies with your HTML.

Ensure that your sidebar <aside> and your content <article> are nested within the same <div> or <section>.

The terms I'm using are with HTML5 syntax. If you aren't using HTML5, replace all elements with <div>.

Example:

<header></header>
<div>
    <section></section>
    <aside></aside>
</div>

If both the <section> & <aside> have a width:% or px; & float:left; you should be fine.

Upvotes: 0

Paul Woidke
Paul Woidke

Reputation: 928

Since #sidebar has left-margin: 23.5%;, it moves to the left when you reduce the window because it will always be 23.5% of the window width. So if your window is 1000px wide, the #sidebar div's margin-left will be 235px, and this number decreases with the width of the window (making it look like the div is moving to the left).

The #center div moves down because the width of the window is less than the margin-left value + the width of #sidebar + the width of #center. When the window is too narrow, the divs rearrange to fit (like how text in a text box goes to a new line when it runs out of space).

If you want to keep your layout how it is when the window gets smaller, there are two easy things you can do:

Make all of your divs width a percentage: If your #sidebar has margin-left:25%; width:20%; and your #center div has width:50%, both of the divs (and the margin) will resize as the screen shrinks (this is one way Responsive Web Design works). Here is an example on jsFiddle.

Put everything in a container div: Since it sounds you want to have your header, sidebar, and content in one block, you could wrap all of these elements in a container div. You'll have to change your CSS a bit, but a basic implementation would look something like this:

CSS

#container {
  width: 1000px;
  margin-left:auto;
  margin-right:auto;
}

#header {
 background-color:red;
 width:auto;
 height:250px;
}

#sidebar {
  height:800px;
  width:300px;
  background-color:#CCFFFF;
  float:left;
}

#center {
  height:800px;
  width:auto;
  background-color:green;
  border:1px solid black
  float:left;
}

HTML

<div id=#container">
  <div id="#header">header content</div>
  <div id="#sidebar">sidebar content</div>
  <div id="#center">center content</div>
</div>

Here is a jsFiddle with this code.

Since the container div has a set width, you don't have to worry about the widths of the child elements.

Upvotes: 1

Timotheus0106
Timotheus0106

Reputation: 1586

so i think you want to get #sidebar and #center beside each other,centered and under #header or?

Would be nice if we can see your html markup but

just give every div position:relative and a float left.

then you give the #sidebar left:50%. Then add the width of both divs /2 (#sidebar and #center). --> (sidebar.width + center.width) /2

Then you give the result #sidebar with a margin-left and a minus before. --> margin-left: -500px

Upvotes: 0

Related Questions