The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Responsive Div centered layout
laurensvp
post Oct 17 2012, 07:04 AM
Post #1





Group: Members
Posts: 2
Joined: 17-October 12
Member No.: 17,961



Hi guys.
I want to make a layout like this: http://imageshack.us/a/img577/3946/divlayout.png

I tried several things, but can't get it to work. It need to be responsive (so with percentages).

<div id="div1">
<img id="img1" />
<img id="img2" />
</div>

give div1 a css width of 40%, and margin: 0 auto.
And then?

Thanks in regards!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 17 2012, 08:15 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



There has been a lot of talk all over the internet after an article at Alistapart by Ethan Marcotte on responsive web design. Read the article here: http://www.alistapart.com/articles/responsive-web-design/

And have a look here: http://www.d.umn.edu/itss/training/online/...ign/css.html#mq
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
laurensvp
post Oct 17 2012, 02:26 PM
Post #3





Group: Members
Posts: 2
Joined: 17-October 12
Member No.: 17,961



QUOTE(Frederiek @ Oct 17 2012, 03:15 PM) *

There has been a lot of talk all over the internet after an article at Alistapart by Ethan Marcotte on responsive web design. Read the article here: http://www.alistapart.com/articles/responsive-web-design/

And have a look here: http://www.d.umn.edu/itss/training/online/...ign/css.html#mq


This links have nothing to do with my problem... My problem is not the responsive layout, but the layout of my divs...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 17 2012, 05:27 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,583
Joined: 10-August 06
Member No.: 7



This might work for the widths:

CODE
<style type="text/css">
div {
border: 1px solid red;
width: 40%;
margin: auto;
}

#a {width: 100%;}

#b {
width: 130%;
margin-left: -30%;
}
</style>

<div>
<img src="dog.jpg" id="a" alt="">
<img src="dog.jpg" id="b" alt="">
</div>

Do you want the DIV and images placed in the vertical middle as well? That can't be combined with the above without distorting the aspect ratio of the images.

QUOTE
It need to be responsive (so with percentages).

Traditionally the word "fluid" has been used for that. "Responsive" is more about layout techniques using CSS media types and -queries, as explained in Frederiek's link. A responsive site can of course be fluid too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 18 2012, 03:23 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Ok, maybe I misunderstood your question.
Anyway, call it responsive, fluid, liquid or elastic, the second link I posted has a large list of useful articles on these subjects.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd October 2020 - 04:15 PM