2 replies [Last post]
Quarenvale
Quarenvale's picture
Offline
newbie
Last seen: 4 years 25 weeks ago
Joined: 2015-02-25
Posts: 1
Points: 2

I'm having trouble keeping my divs centered when I change the resolution of my site. I'm fairly new to CSS and HTML so expect my code to be messy full of mistakes and illogical decisions (but hey its part of the learning process right?).
Anyway, here's the problem.

I have 2 divs within a main div. I have centered the main div and the two divs within it easily, however when I shrink my website in chrome (i.e. reduce the resolution), the divs collapse (with the second moving to underneath the 1st). This is as intended, however when this happens the divs are no longer centered properly (instead they are over to the left). How do I solve this? What's causing it. Can I tell dreamweaver to apply different widths/margins if the resolution goes below a certain threshold?

Keep in mind, this is for a school project where for the first part we followed steps when making the site, so I'm not sure what all of the code in there does. As I said before I'm not very good with coding (yet), so any/all help is appreciated.

Here's the code
Main1 is the first div container, article1 and picture1 are the two divs within. We're also using Bootstrap for a lot of the styling/layout if that matters.

HTML (removed useless content and the <> so it actually shows the code)

div class="main1 row container-fluid"
div class="article1 container col-lg-7"
/div
div class="picture1 container col-lg-3"
/div
/div

CSS

.main1 {
	width:100%;
	margin-right:auto;
	margin-left:auto;
	margin-top:1%;
	}	
	.article1 {
		width:60%;
		margin-right:2.5%;
		margin-left:2.5%;
		border-style: solid;
		border-color: #00F;
		border-width: thin;
		border-radius: 0.75em;	
		padding: 0.5em;
		text-align:justify;		
		}
	.picture1 {
		width:30%;
		margin-right:2.5%;
		margin-left:2.5%;
		border-style: solid;
		border-color: #00F;
		border-width: thin;	
		}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Quarenvale, A couple of

Hi Quarenvale,
A couple of things to consider.
Firstly DIV's are block level elements, so by default (unless told differently) they take up all available horizontal space.
So if an element takes up all available horizontal space, margin auto isn't going to have much effect.
maybe instead of the width:100% you want a min-width or max-width or both.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 3 years 44 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

centering divs

Hi,the each divs are separate class name and width include %,height not mentioned float:left for each divs.main div used float:left,positions.