Jump to content

design problem with HTML & CSS


Recommended Posts

Please refer to the image for this question.

I want to create the design as shown in the image.

but the problem appeared with the div box3. For div box3 I've set float:left. But it appears at the right margin of the div contents just below the div box2. To set the div box3 to the left position, just below the div box2, I had to set the margin-left to a very low negative value. This design creates problem with Aspx page.

post-18311-0-16681700-1306780140_thumb.g

Link to post
Share on other sites

Without seeing the actual HTML code, it is very difficult to say why is what.

Also, HTML rendering is very much browser-specific, so what you will see on say Firefox, may look very different on Internet Explorer.

Finally, what kind of problem you encounter on the aspx page?

Link to post
Share on other sites

I've used dream weaver for the coding.

CSS code of the given image:

#box1{width:205px;

height:225px;

float:left;

margin-top:10px;

}

#contents{width:597px;

height:350px;

float:left;

margin-top:10px;

margin-left:8px;

}

#box2{width:205px;

height:130px;

float:right;

margin-top:10px;

}

#box3{ width:205px;

height:325px;

float:left;

margin-left:-816px;

margin-top:265px;

}

Link to post
Share on other sites
  • 8 months later...

I've used dream weaver for the coding.

CSS code of the given image:

#box1{width:205px;

height:225px;

float:left;

margin-top:10px;

}

#contents{width:597px;

height:350px;

float:left;

margin-top:10px;

margin-left:8px;

}

#box2{width:205px;

height:130px;

float:right;

margin-top:10px;

}

#box3{ width:205px;

height:325px;

float:left;

margin-left:-816px;

margin-top:265px;

}

I think you are new to CSS. As par the image you have attached, you should make three column(divs)-left-sidebar, middle content and the right-sidebar, each with height auto, use float and clear both to make the three columns as par the image, then you can insert the two divs in left-sidebar and one in right-sidebar. Always give ""position:relative;" in CSS and use border to check whether there is overlap problem or not.

Link to post
Share on other sites
  • 2 months later...

  • Create an outer div (width=total width)
  • Create 3 DIV left, mid, right (width= ....., and float:left)
  • Then place the contents(div s) in curresponding divs- left /mid/right
  • if again showing problms... give overflow:hodden to the 3 boxes

The error occured because of following reasons

  • may be thw width of 3 main divs are greater than total width of outer div
  • thats why the div came below
  • When giving padding/margin to divs, you must decrease the width/height of div

Hope you can fix this....

Good Luck

Link to post
Share on other sites
  • 1 year later...

Please check my first step...

<div id="wrapper">

<div id="header">Header</div>

<div id="content-box1"><p>Box 1</p></div>

<div id="content-box2"><p>Box 2</p></div>

<div id="content-box3"><p>Box 3</p></div>

<div id="content">

<div id="content-left"></div>

<div id="content-main"></div>

</div>

<div id="footer"></div>

<div id="bottom"></div>

</div>

Next second step

CSS*******************

body {

font-family:arial,helvetica,sans-serif;

font-size:12px;

}

#wrapper {

width:900px;

margin:0px auto;

border:1px solid #bbb;

padding:10px;

}

#header {

border:1px solid #bbb;

height:80px;

padding:10px;

}

#content {

margin-top:10px;

padding-bottom:10px;

}

#content div {

padding:10px;

border:1px solid #bbb;

float:left;

}

#content-left {

width:180px;

height:300px;

}

#content-main {

margin-left:10px;

width:666px;

height:150px;

}

#content-box1, #content-box2, #content-box3 {

padding:10px;

border:1px solid #bbb;

position:absolute;

margin-top:190px;

height:120px;

}

Link to post
Share on other sites
  • 3 weeks later...

We use the "mobile first" design philosophy, first making the design for small screens and then ...

He co-founded CodePen, an online playground for HTML, CSS, and JavaScript

Using jQuery to add interactivity and solve complex problems.

I use float-left.

Besides not having any logical structure, this above appears to have been partially copied from :- http://css-tricks.com/lodge/ - for some unexplained reason :unsure::unsure::unsure:

Link to post
Share on other sites

Members

wctumesh and

wcttech plus

neonight and

audio

all have the same IP addresses and very similar email addresses.

I think it is some "clever" devil mucking us about, so I am going to take action.

Link to post
Share on other sites
  • 2 weeks later...

Please flow it----------



HTML------------------

<body>
<div id="container">
<div id="wrapper">
<div id="header">Header</div>
<div id="content_left"><p>Box 1</p></div>
<div id="content_right"><p>Box 2</p></div>
</div>

CSS---------------------------------

body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
width:800px;
margin:0px auto;
border:1px solid #bbb;
padding:15px;
}
#header {
border:1px solid #bbb;
height:150px;
padding:10px;
}
#content_left{
margin-top:10px;
padding-bottom:10px;
}
#content_right{
margin-top:10px;
padding-bottom:10px;
}

You can try it.


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Privacy Policy